重排和重繪
網頁生成的時候，至少會渲染一次。用戶訪問的過程中，還會不斷重新渲染。
以下三種情況，會導致網頁重新渲染。
- 修改DOM
- 修改樣式表
- 用戶事件（比如鼠標懸停、頁面滾動、輸入框鍵入文字、改變窗口大小等等）
重新渲染，就需要重新生成佈局和重新繪製。前者叫做"重排"（reflow），後者叫做"重繪"（repaint）。
需要注意的是，"重繪"不一定需要"重排"，比如改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，因爲佈局沒有改變。但是，"重排"必然導致"重繪"，比如改變一個網頁元素的位置，就會同時觸發"重排"和"重繪"，因爲佈局改變了。
對於性能的影響
重排和重繪會不斷觸發，這是不可避免的。但是，它們非常耗費資源，是導致網頁性能低下的根本原因。
提高網頁性能，就是要降低"重排"和"重繪"的頻率和成本，儘量少觸發重新渲染。
前面提到，DOM變動和樣式變動，都會觸發重新渲染。但是，瀏覽器已經很智能了，會盡量把所有的變動集中在一起，排成一個隊列，然後一次性執行，儘量避免多次重新渲染。
div.style.color = ‘blue‘;
div.style.marginTop = ‘30px‘;上面代碼中，div元素有兩個樣式變動，但是瀏覽器只會觸發一次重排和重繪。
如果寫得不好，就會觸發兩次重排和重繪。
div.style.color = ‘blue‘;
var margin = parseInt(div.style.marginTop);
div.style.marginTop = (margin + 10) + ‘px‘;上面代碼對div元素設置背景色以後，第二行要求瀏覽器給出該元素的位置，所以瀏覽器不得不立即重排。
一般來說，樣式的寫操作之後，如果有下面這些屬性的讀操作，都會引發瀏覽器立即重新渲染。
- offsetTop/offsetLeft/offsetWidth/offsetHeight
- scrollTop/scrollLeft/scrollWidth/scrollHeight
- clientTop/clientLeft/clientWidth/clientHeight
- getComputedStyle()
// bad
div.style.left = div.offsetLeft + 10 + "px";
div.style.top = div.offsetTop + 10 + "px";
// good
var left = div.offsetLeft;
var top = div.offsetTop;
div.style.left = left + 10 + "px";
div.style.top = top + 10 + "px";- 重排和重繪的DOM元素層級越高，成本就越高。
- table元素的重排和重繪成本，要高於div元素
提高性能的九個技巧
有一些技巧，可以降低瀏覽器重新渲染的頻率和成本。
第一條是上一節說到的，DOM 的多個讀操作（或多個寫操作），應該放在一起。不要兩個讀操作之間，加入一個寫操作。
第二條，如果某個樣式是通過重排得到的，那麼最好緩存結果。避免下一次用到的時候，瀏覽器又要重排。
第三條，不要一條條地改變樣式，而要通過改變class，或者csstext屬性，一次性地改變樣式。
// bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
// good
el.className += " theclassname";
// good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";第四條，儘量使用離線DOM，而不是真實的網面DOM，來改變元素樣式。比如，操作Document Fragment對象，完成後再把這個對象加入DOM。再比如，使用 cloneNode() 方法，在克隆的節點上進行操作，然後再用克隆的節點替換原始節點。
第五條，先將元素設爲 display: none （需要1次重排和重繪），然後對這個節點進行100次操作，最後再恢復顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染。
第六條，position屬性爲absolute或fixed的元素，重排的開銷會比較小，因爲不用考慮它對其他元素的影響。
第七條，只在必要的時候，纔將元素的display屬性爲可見，因爲不可見的元素不影響重排和重繪。另外，visibility : hidden 的元素只對重排有影響，不影響重繪。
第八條，使用虛擬DOM的腳本庫，比如React等。
第九條，使用 window.requestAnimationFrame()、window.requestIdleCallback() 這兩個方法調節重新渲染
刷新率
很多時候，密集的重新渲染是無法避免的，比如scroll事件的回調函數和網頁動畫。
網頁動畫的每一幀（frame）都是一次重新渲染。每秒低於24幀的動畫，人眼就能感受到停頓。一般的網頁動畫，需要達到每秒30幀到60幀的頻率，才能比較流暢。如果能達到每秒70幀甚至80幀，就會極其流暢。
大多數顯示器的刷新頻率是60Hz，爲了與系統一致，以及節省電力，瀏覽器會自動按照這個頻率，刷新動畫（如果可以做到的話）。所以，如果網頁動畫能夠做到每秒60幀，就會跟顯示器同步刷新，達到最佳的視覺效果。這意味着，一秒之內進行60次重新渲染，每次重新渲染的時間不能超過16.66毫秒。
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);
$(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);