## 四、提高性能的九個技巧 有一些技巧，可以降低瀏覽器重新渲染的頻率和成本。 第一條是上一節說到的，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() 這兩個方法調節重新渲染（詳見后文）。