遍历对象数组执行动画是否该用for循环？是否需要改用canvas实现？

循环类型影响说明 #

你当前的性能瓶颈和使用的循环类型无关，while 循环和普通 for 循环的遍历速度差异在这个场景下可以忽略，真正的性能消耗来自 每个方块移动时触发的DOM重排/重绘 ，以及 setInterval 执行时机和浏览器渲染节拍不匹配的问题。

现有HTML DOM方案优化方法 #

• 把setInterval替换为requestAnimationFrame，后者会和浏览器的原生渲染帧率同步，避免掉帧和无效执行，参考修改后的代码：

beginMovement = () => {
  if (!this.animationId) {
    this.animationId = requestAnimationFrame(this.movement);
  }
};
movement = () => {
  let i = 0;
  while (i < this.boxes.length) {
    this.boxes[i].move();
    i++;
  }
  this.animationId = requestAnimationFrame(this.movement);
};
// 停止动画时调用 cancelAnimationFrame(this.animationId) 即可

• 方块移动的样式优先使用transform: translate() 而非top/left属性，transform操作不会触发DOM重排，只会触发轻量的重绘操作，同时可以给方块元素添加will-change: transform属性开启GPU硬件加速，进一步降低渲染开销。
• 完成上述优化后，只要同时移动的方块数量在100以内，基本可以实现流畅运行的效果。

切换到Canvas的适用场景 #

如果你的业务场景需要同时渲染超过200个可移动方块，更推荐切换到canvas实现：

• DOM节点本身的内存开销、重排重绘的计算成本会随着节点数量增长线性上升，而Canvas是单图层位图渲染，数千个元素的绘制开销远低于同等数量的DOM元素。
• 切换到Canvas后不需要大幅修改现有逻辑，只需要把box.move()的逻辑从修改DOM属性改为调用Canvas 2D上下文的绘制API即可，遍历逻辑可以完全复用。

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