七、window.requestAnimationFrame()
最后更新于：2022-04-01 03:23:30
## 七、window.requestAnimationFrame()
有一些JavaScript方法可以调节重新渲染，大幅提高网页性能。
其中最重要的，就是 window.requestAnimationFrame() 方法。它可以将某些代码放到下一次重新渲染时执行。
~~~
function doubleHeight(element) {
var currentHeight = element.clientHeight;
element.style.height = (currentHeight * 2) + 'px';
}
elements.forEach(doubleHeight);
~~~
上面的代码使用循环操作，将每个元素的高度都增加一倍。可是，每次循环都是，读操作后面跟着一个写操作。这会在短时间内触发大量的重新渲染，显然对于网页性能很不利。
我们可以使用`window.requestAnimationFrame()`，让读操作和写操作分离，把所有的写操作放到下一次重新渲染。
~~~
function doubleHeight(element) {
var currentHeight = element.clientHeight;
window.requestAnimationFrame(function () {
element.style.height = (currentHeight * 2) + 'px';
});
}
elements.forEach(doubleHeight);
~~~
页面滚动事件（scroll）的监听函数，就很适合用 window.requestAnimationFrame() ，推迟到下一次重新渲染。
~~~
$(window).on('scroll', function() {
window.requestAnimationFrame(scrollHandler);
});
~~~
当然，最适用的场合还是网页动画。下面是一个旋转动画的例子，元素每一帧旋转1度。
~~~
var rAF = window.requestAnimationFrame;
var degrees = 0;
function update() {
div.style.transform = "rotate(" + degrees + "deg)";
console.log('updated to degrees ' + degrees);
degrees = degrees + 1;
rAF(update);
}
rAF(update);
~~~