你遇到過性能很差的網頁嗎？
這種網頁響應非常緩慢，占用大量的 cpu 和記憶體，浏覽起來常常有卡頓，頁面的動畫效果也不流暢。
你會有什麼反應？我猜想，大多數使用者會關閉這個頁面，改為通路其他網站。作為一個開發者，肯定不願意看到這種情況，那麼怎樣才能提高性能呢？
本文将詳細介紹性能問題的出現原因，以及解決方法。
<a target="_blank"></a>
要了解網頁性能為什麼不好，就要了解網頁是怎麼生成的。
網頁的生成過程，大緻可以分成五步。
html 代碼轉化成 dom css 代碼轉化成 cssom（css object model） 結合 dom 和 cssom，生成一棵渲染樹（包含每個節點的視覺資訊） 生成布局layout，即将所有渲染樹的所有節點進行平面合成 将布局繪制paint在螢幕上
這五步裡面，第一步到第三步都非常快，耗時的是第四步和第五步。
"生成布局"flow和"繪制"paint這兩步，合稱為"渲染"render。
網頁生成的時候，至少會渲染一次。使用者通路的過程中，還會不斷重新渲染。
以下三種情況，會導緻網頁重新渲染。
修改 dom 修改樣式表 使用者事件（比如滑鼠懸停、頁面滾動、輸入框鍵入文字、改變視窗大小等等）
重新渲染，就需要重新生成布局和重新繪制。前者叫做"重排"reflow，後者叫做"重繪"repaint。
需要注意的是，"重繪"不一定需要"重排"，比如改變某個網頁元素的顔色，就隻會觸發"重繪"，不會觸發"重排"，因為布局沒有改變。但是，"重排"必然導緻"重繪"，比如改變一個網頁元素的位置，就會同時觸發"重排"和"重繪"，因為布局改變了。
重排和重繪會不斷觸發，這是不可避免的。但是，它們非常耗費資源，是導緻網頁性能低下的根本原因。
提高網頁性能，就是要降低"重排"和"重繪"的頻率和成本，盡量少觸發重新渲染。
前面提到，dom 變動和樣式變動，都會觸發重新渲染。但是，浏覽器已經很智能了，會盡量把所有的變動集中在一起，排成一個隊列，然後一次性執行，盡量避免多次重新渲染。
<code>div.style.color = 'blue';</code>
<code>div.style.margintop = '30px';</code>
上面代碼中，div 元素有兩個樣式變動，但是浏覽器隻會觸發一次重排和重繪。
如果寫得不好，就會觸發兩次重排和重繪。
<code>var margin = parseint(div.style.margintop);</code>
<code>div.style.margintop = (margin + 10) + 'px';</code>
上面代碼對 div 元素設定背景色以後，第二行要求浏覽器給出該元素的位置，是以浏覽器不得不立即重排。
一般來說，樣式的寫操作之後，如果有下面這些屬性的讀操作，都會引發浏覽器立即重新渲染。
<code>offsettop / offsetleft / offsetwidth / offsetheight</code>
<code>scrolltop / scrollleft / scrollwidth / scrollheight</code>
<code>clienttop / clientleft / clientwidth / clientheight</code>
<code>getcomputedstyle()</code>
是以，從性能角度考慮，盡量不要把讀操作和寫操作，放在一個語句裡面。
<code>// bad</code>
<code>div.style.left = div.offsetleft + 10 + "px";</code>
<code>div.style.top = div.offsettop + 10 + "px";</code>
<code></code>
<code>// good</code>
<code>var left = div.offsetleft;</code>
<code>var top = div.offsettop;</code>
<code>div.style.left = left + 10 + "px";</code>
<code>div.style.top = top + 10 + "px";</code>
一般的規則是：
樣式表越簡單，重排和重繪就越快。 重排和重繪的 dom 元素層級越高，成本就越高。 table 元素的重排和重繪成本，要高于 div 元素
有一些技巧，可以降低浏覽器重新渲染的頻率和成本。
第一條，是上一節說到的，dom 的多個讀操作（或多個寫操作），應該放在一起。不要兩個讀操作之間，加入一個寫操作。
第二條，如果某個樣式是通過重排得到的，那麼最好緩存結果。避免下一次用到的時候，浏覽器又要重排。
第三條，不要一條條地改變樣式，而要通過改變<code>class</code>，或者<code>csstext</code>屬性，一次性地改變樣式。
<code>var left = 10;</code>
<code>var top = 10;</code>
<code>el.style.left = left + "px";</code>
<code>el.style.top = top + "px";</code>
<code>el.classname += " theclassname";</code>
<code>el.style.csstext += "; left: " + left + "px; top: " + top + "px;";</code>
第四條，盡量使用離線 dom，而不是真實的頁面 dom，來改變元素樣式。比如，操作 document fragment 對象，完成後再把這個對象加入 dom。再比如，使用 <code>clonenode()</code> 方法，在克隆的節點上進行操作，然後再用克隆的節點替換原始節點。
第五條，先将元素設為<code> display: none</code> （需要1次重排和重繪），然後對這個節點進行100次操作，最後再恢複顯示（需要1次重排和重繪）。這樣一來，你就用兩次重新渲染，取代了可能高達100次的重新渲染。
第六條，<code>position</code>屬性為<code>absolute</code>或<code>fixed</code>的元素，重排的開銷會比較小，因為不用考慮它對其他元素的影響。
第七條，隻在必要的時候，才将元素的<code>display</code>屬性為可見，因為不可見的元素不影響重排和重繪。另外，<code>visibility : hidden</code> 的元素隻對重排有影響，不影響重繪。
第八條，使用虛拟 dom 的腳本庫，比如 react 等。
第九條，使用 <code>window.requestanimationframe()</code>、<code>window.requestidlecallback()</code> 這兩個方法調節重新渲染（詳見後文）。
很多時候，密集的重新渲染是無法避免的，比如 scroll 事件的回調函數和網頁動畫。
網頁動畫的每一幀frame都是一次重新渲染。每秒低于24幀的動畫，人眼就能感受到停頓。一般的網頁動畫，需要達到每秒30幀到60幀的頻率，才能比較流暢。如果能達到每秒70幀甚至80幀，就會極其流暢。
大多數顯示器的重新整理頻率是 60hz，為了與系統一緻，以及節省電力，浏覽器會自動按照這個頻率，重新整理動畫（如果可以做到的話）。
是以，如果網頁動畫能夠做到每秒60幀，就會跟顯示器同步重新整理，達到最佳的視覺效果。這意味着，一秒之内進行60次重新渲染，每次重新渲染的時間不能超過16.66毫秒。
一秒之間能夠完成多少次重新渲染，這個名額就被稱為"重新整理率"，英文為fps（frame per second）。60次重新渲染，就是60fps。
chrome 浏覽器開發者工具的 timeline 面闆，是檢視"重新整理率"的最佳工具。這一節介紹如何使用這個工具。
首先，按下 f12 打開"開發者工具"，切換到 timeline 面闆。
左上角有一個灰色的圓點，這是錄制按鈕，按下它會變成紅色。然後，在網頁上進行一些操作，再按一次按鈕完成錄制。
timeline 面闆提供兩種檢視方式：橫條的是"事件模式"event mode，顯示重新渲染的各種事件所耗費的時間；豎條的是"幀模式"frame mode，顯示每一幀的時間耗費在哪裡。
先看"事件模式"，你可以從中判斷，性能問題發生在哪個環節，是 javascript 的執行，還是渲染？
不同的顔色表示不同的事件。
藍色：網絡通信和html解析 黃色：javascript執行 紫色：樣式計算和布局，即重排 綠色：重繪
哪種色塊比較多，就說明性能耗費在那裡。色塊越長，問題越大。
幀模式frames mode用來檢視單個幀的耗時情況。每幀的色柱高度越低越好，表示耗時少。
你可以看到，幀模式有兩條水準的參考線。
下面的一條是 60fps，低于這條線，可以達到每秒60幀；上面的一條是 30fps，低于這條線，可以達到每秒30次渲染。如果色柱都超過 30fps，這個網頁就有性能問題了。
此外，還可以檢視某個區間的耗時情況。
或者點選每一幀，檢視該幀的時間構成。
有一些 javascript 方法可以調節重新渲染，大幅提高網頁性能。
其中最重要的，就是 <code>window.requestanimationframe()</code> 方法。它可以将某些代碼放到下一次重新渲染時執行。
<code>function doubleheight(element) {</code>
<code>var currentheight = element.clientheight;</code>
<code>element.style.height = (currentheight * 2) + 'px';</code>
<code>}</code>
<code>elements.foreach(doubleheight);</code>
上面的代碼使用循環操作，将每個元素的高度都增加一倍。可是，每次循環都是，讀操作後面跟着一個寫操作。這會在短時間内觸發大量的重新渲染，顯然對于網頁性能很不利。
我們可以使用<code>window.requestanimationframe()</code>，讓讀操作和寫操作分離，把所有的寫操作放到下一次重新渲染。
<code>window.requestanimationframe(function () {</code>
<code>});</code>
頁面滾動事件scroll的監聽函數，就很适合用 <code>window.requestanimationframe()</code> ，推遲到下一次重新渲染。
<code>$(window).on('scroll', function() {</code>
<code>window.requestanimationframe(scrollhandler);</code>
當然，最适用的場合還是網頁動畫。下面是一個旋轉動畫的例子，元素每一幀旋轉1度。
<code>var raf = window.requestanimationframe;</code>
<code>var degrees = 0;</code>
<code>function update() {</code>
<code>div.style.transform = "rotate(" + degrees + "deg)";</code>
<code>console.log('updated to degrees ' + degrees);</code>
<code>degrees = degrees + 1;</code>
<code>raf(update);</code>
它指定隻有當一幀的末尾有空閑時間，才會執行回調函數。
<code>requestidlecallback(fn);</code>
上面代碼中，隻有目前幀的運作時間小于16.66ms時，函數fn才會執行。否則，就推遲到下一幀，如果下一幀也沒有空閑時間，就推遲到下下一幀，以此類推。
它還可以接受第二個參數，表示指定的毫秒數。如果在指定 的這段時間之内，每一幀都沒有空閑時間，那麼函數fn将會強制執行。
<code>requestidlecallback(fn, 5000);</code>
上面的代碼表示，函數fn最遲會在5000毫秒之後執行。
函數 fn 可以接受一個 deadline 對象作為參數。
<code>requestidlecallback(function someheavycomputation(deadline) {</code>
<code>while(deadline.timeremaining() > 0) {</code>
<code>doworkifneeded();</code>
<code>if(thereismoreworktodo) {</code>
<code>requestidlecallback(someheavycomputation);</code>
上面代碼中，回調函數 someheavycomputation 的參數是一個 deadline 對象。
deadline對象有一個方法和一個屬性：timeremaining() 和 didtimeout。
timeremaining() 方法傳回目前幀還剩餘的毫秒。這個方法隻能讀，不能寫，而且會動态更新。是以可以不斷檢查這個屬性，如果還有剩餘時間的話，就不斷執行某些任務。一旦這個屬性等于0，就把任務配置設定到下一輪<code>requestidlecallback</code>。
前面的示例代碼之中，隻要目前幀還有空閑時間，就不斷調用 doworkifneeded 方法。一旦沒有空閑時間，但是任務還沒有全執行，就配置設定到下一輪<code>requestidlecallback</code>。
deadline 對象的 <code>didtimeout</code> 屬性會傳回一個布爾值，表示指定的時間是否過期。這意味着，如果回調函數由于指定時間過期而觸發，那麼你會得到兩個結果。
timeremaining 方法傳回0 didtimeout 屬性等于 true
是以，如果回調函數執行了，無非是兩種原因：目前幀有空閑時間，或者指定時間到了。
<code>function mynonessentialwork (deadline) {</code>
<code>while ((deadline.timeremaining() > 0 || deadline.didtimeout) && tasks.length > 0)</code>
<code>if (tasks.length > 0)</code>
<code>requestidlecallback(mynonessentialwork);</code>
<code>requestidlecallback(mynonessentialwork, 5000);</code>
上面代碼確定了，doworkifneeded 函數一定會在将來某個比較空閑的時間（或者在指定時間過期後）得到反複執行。
requestidlecallback 是一個很新的函數，剛剛引入标準，目前隻有 chrome 支援。
本文來自雲栖社群合作夥伴“linux中國”，原文釋出日期：2015-09-18