## 七、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);
~~~
