IE9中手动用JavaScript实现SVG旋转是否会产生性能损耗？求优化方案

嘿，你的手动实现能在IE9跑起来已经很棒了，但确实有几个可以优化的点，既能减少性能损耗，还能让代码更简洁：

现有代码的性能痛点 #

你的当前实现里，degrees数组的shift()和push()操作其实是没必要的开销——shift()需要重新排列数组里的所有元素，每次循环都做这个会额外消耗CPU资源，完全可以用一个简单的变量来追踪当前角度。另外，setInterval的执行时机和浏览器的重绘周期不同步，可能会导致不必要的重绘，增加性能负担。

优化后的实现方案 #

这里有个更高效的版本，解决了上面的问题：

// 追踪当前旋转角度
var currentDeg = 0;
// 获取目标SVG元素（确保在DOM就绪后获取，比如放在DOMContentLoaded事件里）
var element = document.getElementById('your-svg-element');

// 旋转逻辑函数
function rotate() {
  // 更新角度，超过360重置为0
  currentDeg = (currentDeg + 1) % 360;
  // 应用IE9的msTransform
  element.style.msTransform = 'rotate(' + currentDeg + 'deg)';
  // 用requestAnimationFrame循环调用，和浏览器重绘同步
  requestAnimationFrame(rotate);
}

// 针对IE9的requestAnimationFrame polyfill
if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = function(callback) {
    return setTimeout(callback, 16); // 模拟60fps的间隔，和主流浏览器一致
  };
}

// 启动旋转
rotate();

优化点说明 #

• 移除数组操作：用currentDeg变量直接追踪角度，比数组操作高效得多，逻辑也更清晰。
• 改用requestAnimationFrame：这个API会和浏览器的重绘周期同步执行，避免不必要的绘制操作，CPU占用更低。因为IE9不支持原生的requestAnimationFrame，我们加了一个简单的polyfill来模拟它的行为。
• 角度重置简化：用取模运算(currentDeg + 1) % 360自动处理角度重置，不用手动判断360的边界。

额外建议 #

如果你的SVG元素比较复杂，还可以尝试：

• 确保SVG元素没有不必要的子元素或复杂滤镜，减少重绘时的计算量。
• 把旋转的中心点设置在元素的中心（默认就是中心，但如果元素有transform-origin修改的话要注意），避免额外的布局偏移计算。

内容的提问来源于stack exchange，提问作者Dimitar