javascript - 这种在 IE9 中旋转 SVG 的方法会导致性能下降吗？

Question

我的任务是让 SVG 在 IE9 中旋转。

我找到了 FakeSmile使它旋转的库，但是在整个 DOM 准备就绪之后，这不是我想要的行为。我尝试用 JavaScript 手动完成，并以这段代码结束:

//init an array with values from 0 to 360 for degrees 
var degrees = [];
for(var i = 0; i <= 360; i++) {
    degress.push(i);
}
// function to rotate it, after it's fetched from the DOM
var rotate = function() {
    var deg = degrees.shift();
    element.style.msTransform = "rotate(" + deg + "deg)";
    degrees.push(deg);         
}
setInterval(rotate, 7);

虽然它正在运行，但我担心是否会出现任何性能影响。另外如果有更好的解决办法。欢迎提出任何建议。

Answer 1

创建者函数和有组织的对象将是一个好的开始。请记住，如果可以避免，就不应该污染全局命名空间。

还有反跳请求和动画。每 7 毫秒的请求是 60fps 屏幕上每帧的两个请求(最常见)，无需计算和丢弃用户从未见过的帧。

在我的示例中，我使用了 requestAnimationFrame，因为它将与屏幕刷新率同步。在每次请求时，我都会检查句柄是否已经在绘制框架，如果不是，我会安排框架绘制。

请注意，您仍然可以每 7 毫秒设置一次 JavaScript 变量。只是 DOM 变慢了。

编辑 1 - IE9 中没有requestAnimationFrame

我对 requestAnimationFrame 的错误，但去抖动仍然是个好主意。使用去抖动，有几个因素可以请求更改，它仍然只会在相关时呈现。

我已将 requestAnimationFrame 替换为 setTimeout(.... 1000/60) 以获得接近 60 fps 的动画。

function createRotator(element) {
  var rotator;
  rotator = {
    degrees: 0,
    element: element,
    eventHandle: false,
    rotate: function rotate() {
      rotator.degrees = (rotator.degrees + 1) % 360;
      if (rotator.eventHandle === false)
        rotator.eventHandle = setTimeout(function() {
          rotator.element.style.transform = "rotate(" + rotator.degrees + "deg)";
          rotator.element.style.msTransform = "rotate(" + rotator.degrees + "deg)";
          rotator.eventHandle = false;
        }, 1000 / 60);
    }
  };
  return rotator;
}
//TEST
var nodes = 0;
var handle;
handle = setInterval(function() {
  nodes++;
  if (nodes > 10) {
    clearInterval(handle);
  }
  var testNode = document.body.appendChild(document.createElement("p"));
  testNode.innerHTML = "Hello dear World!";
  testNode.style.width = "115px";
  testNode.style.cssFloat = "left";
  testNode.style.marginTop = "100px";
  var rotator = createRotator(testNode);
  setInterval(rotator.rotate, 3);
}, 1000 / 4);