javascript - 我什么时候需要调用 requestAnimationFrame()？

Question

我明白 requestAnimationFrame()在运行随时间不断改变样式属性的动画时非常有用。

const e = document.getElementById('e');
let count = 0;

function move(timestamp) {
  e.style.left = ++count + 'px';
  requestAnimationFrame(move);
};

requestAnimationFrame(move);

---

现在我的问题是:在 requestAnimationFrame 中包装所有改变 View 视觉外观的东西是否有意义？

换句话说，这个伪代码例子会比没有requestAnimationFrame有更好的性能吗？

const e = document.getElementById('e');
let f = document.createDocumentFragment();

nodes.forEach((node, index) => {
    f.appendChild(node);
}

requestAnimationFrame(timestamp => {
    e.classList.toggle('active');
    container.classList.add('active');
    container.appendChild(fragment);
});

Answer 1

简短的回答是“使用requestAnimationFrame (rAF) 进行频繁更新”。这主要涉及动画或在滚动/调整大小时进行 DOM 修改。如果您只是进行一次性 DOM 更改，通常可以直接进行并继续。不过，使用 rAF 永远不会有坏处，尤其是当您不确定页面上是否发生其他 DOM 突变时。

如果您正在进行大量 DOM 繁重的更新，可以使用一些库以负责任和高效的方式处理此问题(Greensock、React、Vue 等)。

如果您手写，您应该了解浏览器如何计算布局和排队绘制周期。您还需要了解 JavaScript 如何与渲染引擎交互。例如，有一个 bunch of element properties只需读取属性即可导致回流。这些都是昂贵的操作，应该谨慎管理。