四、提高性能的九個技巧

四、提高性能的九個技巧

有一些技巧，可以降低瀏覽器重新渲染的頻率和成本。

第一條是上一節(jié)說到的，DOM 的多個讀操作（或多個寫操作），應該放在一起。不要兩個讀操作之間，加入一個寫操作。

第二條，如果某個樣式是通過重排得到的，那么最好緩存結(jié)果。避免下一次用到的時候，瀏覽器又要重排。

第三條，不要一條條地改變樣式，而要通過改變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，而不是真實的網(wǎng)面DOM，來改變元素樣式。比如，操作Document Fragment對象，完成后再把這個對象加入DOM。再比如，使用 cloneNode() 方法，在克隆的節(jié)點上進行操作，然后再用克隆的節(jié)點替換原始節(jié)點。

第五條，先將元素設(shè)為 display: none （需要1次重排和重繪），然后對這個節(jié)點進行100次操作，最后再恢復顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染。

第六條，position屬性為absolute或fixed的元素，重排的開銷會比較小，因為不用考慮它對其他元素的影響。

第七條，只在必要的時候，才將元素的display屬性為可見，因為不可見的元素不影響重排和重繪。另外，visibility : hidden 的元素只對重排有影響，不影響重繪。

第八條，使用虛擬DOM的腳本庫，比如React等。

第九條，使用 window.requestAnimationFrame()、window.requestIdleCallback() 這兩個方法調(diào)節(jié)重新渲染（詳見后文）。