[TOC] ## 概述 - 提高網頁性能，就是要降低"重排"和"重繪"的頻率和成本，盡量少觸發重新渲染 - 但是，瀏覽器已經很智能了，會盡量把所有的變動集中在一起，排成一個隊列，然后一次性執行，盡量避免多次重新渲染 - 性能角度考慮，盡量不要把讀操作和寫操作 如 ``` // bad div.style.left = div.offsetLeft + 10 + "px"; div.style.top = div.offsetTop + 10 + "px"; // good var left = div.offsetLeft;2 var top = div.offsetTop; div.style.left = left + 10 + "px"; div.style.top = top + 10 + "px"; ``` ### 重排和重繪 以下三種情況，會導致網頁重新渲染 1. 修改DOM 2. 修改樣式表 3. 用戶事件（比如鼠標懸停、頁面滾動、輸入框鍵入文字、改變窗口大小等等） - 重新渲染，就需要**重新生成布局**和**重新繪制**。前者叫做"**重排**"（reflow），后者叫做"**重繪**"（repaint）。 - **重繪"不一定需要"重排**(如改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，因為布局沒有改變) - **"重排"必然導致"重繪"**，比如改變一個網頁元素的位置，就會同時觸發"重排"和"重繪"，因為布局改變了 ## 技巧 ### 多讀(或多寫)放一塊 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，而不是真實的網面DOM，來改變元素樣式,比如 - 操作Document Fragment對象，完成后再把這個對象加入DOM。 - 使用 cloneNode() 方法，在克隆的節點上進行操作，然后再用克隆的節點替換原始節點 ### 高頻重回時可先隱藏在顯示 先將元素設為display: none（需要1次重排和重繪），然后對這個節點進行100次操作，最后再恢復顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染。 ### position的absolute或fixed,重回開銷小 重排的開銷會比較小，因為不用考慮它對其他元素的影響 ### 在必要時設置元素可見 只在必要的時候，才將元素的display屬性為可見，因為不可見的元素不影響重排和重繪。另外，`visibility : hidden`的元素只對重繪有影響，不影響重排 ### 使用虛擬DOM的腳本庫 比如React等 ## 提高性能的方法 有一些JavaScript方法可以調節重新渲染，大幅提高網頁性能。 ### window.requestAnimationFrame() 加需要渲染的操作放到下一次重繪 bad ``` function doubleHeight(element) { var currentHeight = element.clientHeight; element.style.height = (currentHeight * 2) + 'px'; } elements.forEach(doubleHeight); ``` good ``` function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); } elements.forEach(doubleHeight); ``` 示例:頁面滾動操作使用 windows.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); ```` ### window.requestIdleCallback() - 它指定只有當一幀的末尾有空閑時間，才會執行回調函數 - 只有當前幀的運行時間小于16.66ms時，函數fn才會執行。否則，就推遲到下一幀，如果下一幀也沒有空閑時間，就推遲到下下一幀，以此類推 ``` requestIdleCallback(fn); // 如果在指定時間內還是沒有執行,在強制執行 requestIdleCallback(fn, 5000); ```