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

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

我发现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);

尽管它正在运行，但我担心是否会发生性能下降。另外，如果有更好的解决方案。任何建议都欢迎。

最佳答案

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

还可以反跳请求和动画。每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);

关于javascript - 这种在IE9中旋转SVG的方法会导致性能下降吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48096317/