阮一峰：網(wǎng)頁(yè)性能管理詳解
你遇到過(guò)性能很差的網(wǎng)頁(yè)嗎？
這種網(wǎng)頁(yè)響應(yīng)非常緩慢，占用大量的 CPU 和內(nèi)存，瀏覽起來(lái)常常有卡頓，頁(yè)面的動(dòng)畫效果也不流暢。
你會(huì)有什么反應(yīng)？我猜想，大多數(shù)用戶會(huì)關(guān)閉這個(gè)頁(yè)面，改為訪問(wèn)其他網(wǎng)站。作為一個(gè)開發(fā)者，肯定不愿意看到這種情況，怎樣才能提高性能呢？
本文將詳細(xì)介紹性能問(wèn)題的出現(xiàn)原因，以及解決方法。
一、網(wǎng)頁(yè)生成的過(guò)程
要理解網(wǎng)頁(yè)性能為什么不好，就要了解網(wǎng)頁(yè)是怎么生成的。
網(wǎng)頁(yè)的生成過(guò)程，大致可以分成五步。
- HTML 代碼轉(zhuǎn)化成 DOM
- CSS 代碼轉(zhuǎn)化成 CSSOM（CSS Object Model）
- 結(jié)合 DOM 和 CSSOM，生成一棵渲染樹（包含每個(gè)節(jié)點(diǎn)的視覺(jué)信息）
- 生成布局（layout），即將所有渲染樹的所有節(jié)點(diǎn)進(jìn)行平面合成
- 將布局繪制（paint）在屏幕上
這五步里面，第一步到第三步都非?？欤臅r(shí)的是第四步和第五步。
"生成布局"（flow）和"繪制"（paint）這兩步，合稱為"渲染"（render）。
二、重排和重繪
網(wǎng)頁(yè)生成的時(shí)候，至少會(huì)渲染一次。用戶訪問(wèn)的過(guò)程中，還會(huì)不斷重新渲染。
以下三種情況，會(huì)導(dǎo)致網(wǎng)頁(yè)重新渲染。
- 修改 DOM
- 修改樣式表
- 用戶事件（比如鼠標(biāo)懸停、頁(yè)面滾動(dòng)、輸入框鍵入文字、改變窗口大小等等）
重新渲染，就需要重新生成布局和重新繪制。前者叫做"重排"（reflow），后者叫做"重繪"（repaint）。
需要注意的是，"重繪"不一定需要"重排"，比如改變某個(gè)網(wǎng)頁(yè)元素的顏色，就只會(huì)觸發(fā)"重繪"，不會(huì)觸發(fā)"重排"，因?yàn)椴季譀](méi)有改變。但是，"重排"必然導(dǎo)致"重繪"，比如改變一個(gè)網(wǎng)頁(yè)元素的位置，就會(huì)同時(shí)觸發(fā)"重排"和"重繪"，因?yàn)椴季指淖兞恕?/p>
三、對(duì)于性能的影響
重排和重繪會(huì)不斷觸發(fā)，這是不可避免的。但是，它們非常耗費(fèi)資源，是導(dǎo)致網(wǎng)頁(yè)性能低下的根本原因。
提高網(wǎng)頁(yè)性能，就是要降低"重排"和"重繪"的頻率和成本，盡量少觸發(fā)重新渲染。
前面提到，DOM 變動(dòng)和樣式變動(dòng)，都會(huì)觸發(fā)重新渲染。但是，瀏覽器已經(jīng)很智能了，會(huì)盡量把所有的變動(dòng)集中在一起，排成一個(gè)隊(duì)列，然后一次性執(zhí)行，盡量避免多次重新渲染。
- div.style.color = 'blue';
- div.style.marginTop = '30px';
上面代碼中，div 元素有兩個(gè)樣式變動(dòng)，但是瀏覽器只會(huì)觸發(fā)一次重排和重繪。
如果寫得不好，就會(huì)觸發(fā)兩次重排和重繪。
- div.style.color = 'blue';
- var margin = parseInt (div.style.marginTop);
- div.style.marginTop = (margin + 10) + 'px';
上面代碼對(duì) div 元素設(shè)置背景色以后，第二行要求瀏覽器給出該元素的位置，所以瀏覽器不得不立即重排。
一般來(lái)說(shuō)，樣式的寫操作之后，如果有下面這些屬性的讀操作，都會(huì)引發(fā)瀏覽器立即重新渲染。
- offsetTop/offsetLeft/offsetWidth/offsetHeight
- scrollTop/scrollLeft/scrollWidth/scrollHeight
- clientTop/clientLeft/clientWidth/clientHeight
- getComputedStyle ()
所以，從性能角度考慮，盡量不要把讀操作和寫操作，放在一個(gè)語(yǔ)句里面。
- // 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";
一般的規(guī)則是：
- 樣式表越簡(jiǎn)單，重排和重繪就越快。
- 重排和重繪的 DOM 元素層級(jí)越高，成本就越高。
- table 元素的重排和重繪成本，要高于 div 元素
四、提高性能的九個(gè)技巧
有一些技巧，可以降低瀏覽器重新渲染的頻率和成本。
第一條是上一節(jié)說(shuō)到的，DOM 的多個(gè)讀操作（或多個(gè)寫操作），應(yīng)該放在一起。不要兩個(gè)讀操作之間，加入一個(gè)寫操作。
第二條，如果某個(gè)樣式是通過(guò)重排得到的，那么最好緩存結(jié)果。避免下一次用到的時(shí)候，瀏覽器又要重排。
第三條，不要一條條地改變樣式，而要通過(guò)改變 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，而不是真實(shí)的網(wǎng)面 DOM，來(lái)改變?cè)貥邮?。比如，操?Document Fragment 對(duì)象，完成后再把這個(gè)對(duì)象加入 DOM。再比如，使用 cloneNode () 方法，在克隆的節(jié)點(diǎn)上進(jìn)行操作，然后再用克隆的節(jié)點(diǎn)替換原始節(jié)點(diǎn)。
第五條，先將元素設(shè)為 display: none （需要 1 次重排和重繪），然后對(duì)這個(gè)節(jié)點(diǎn)進(jìn)行 100 次操作，最后再恢復(fù)顯示（需要 1 次重排和重繪）。這樣一來(lái)，你就用兩次重新渲染，取代了可能高達(dá) 100 次的重新渲染。
第六條，position 屬性為 absolute 或 fixed 的元素，重排的開銷會(huì)比較小，因?yàn)椴挥每紤]它對(duì)其他元素的影響。
第七條，只在必要的時(shí)候，才將元素的 display 屬性為可見(jiàn)，因?yàn)椴豢梢?jiàn)的元素不影響重排和重繪。另外，visibility : hidden 的元素只對(duì)重排有影響，不影響重繪。
第八條，使用虛擬 DOM 的腳本庫(kù)，比如 React 等。
第九條，使用 window.requestAnimationFrame ()、window.requestIdleCallback () 這兩個(gè)方法調(diào)節(jié)重新渲染（詳見(jiàn)后文）。
五、刷新率
很多時(shí)候，密集的重新渲染是無(wú)法避免的，比如 scroll 事件的回調(diào)函數(shù)和網(wǎng)頁(yè)動(dòng)畫。
網(wǎng)頁(yè)動(dòng)畫的每一幀（frame）都是一次重新渲染。每秒低于 24 幀的動(dòng)畫，人眼就能感受到停頓。一般的網(wǎng)頁(yè)動(dòng)畫，需要達(dá)到每秒 30 幀到 60 幀的頻率，才能比較流暢。如果能達(dá)到每秒 70 幀甚至 80 幀，就會(huì)極其流暢。
大多數(shù)顯示器的刷新頻率是 60Hz，為了與系統(tǒng)一致，以及節(jié)省電力，瀏覽器會(huì)自動(dòng)按照這個(gè)頻率，刷新動(dòng)畫（如果可以做到的話）。
所以，如果網(wǎng)頁(yè)動(dòng)畫能夠做到每秒 60 幀，就會(huì)跟顯示器同步刷新，達(dá)到最佳的視覺(jué)效果。這意味著，一秒之內(nèi)進(jìn)行 60 次重新渲染，每次重新渲染的時(shí)間不能超過(guò) 16.66 毫秒。
一秒之間能夠完成多少次重新渲染，這個(gè)指標(biāo)就被稱為"刷新率"，英文為 FPS（frame per second）。60 次重新渲染，就是 60FPS。
#p#
六、開發(fā)者工具的 Timeline 面板
Chrome 瀏覽器開發(fā)者工具的 Timeline 面板，是查看"刷新率"的最佳工具。這一節(jié)介紹如何使用這個(gè)工具。
首先，按下 F12 打開"開發(fā)者工具"，切換到 Timeline 面板。
左上角有一個(gè)灰色的圓點(diǎn)，這是錄制按鈕，按下它會(huì)變成紅色。然后，在網(wǎng)頁(yè)上進(jìn)行一些操作，再按一次按鈕完成錄制。
Timeline 面板提供兩種查看方式：橫條的是"事件模式"（Event Mode），顯示重新渲染的各種事件所耗費(fèi)的時(shí)間；豎條的是"幀模式"（Frame Mode），顯示每一幀的時(shí)間耗費(fèi)在哪里。
先看"事件模式"，你可以從中判斷，性能問(wèn)題發(fā)生在哪個(gè)環(huán)節(jié)，是 JavaScript 的執(zhí)行，還是渲染？
不同的顏色表示不同的事件。
- 藍(lán)色：網(wǎng)絡(luò)通信和 HTML 解析
- 黃色：JavaScript 執(zhí)行
- 紫色：樣式計(jì)算和布局，即重排
- 綠色：重繪
哪種色塊比較多，就說(shuō)明性能耗費(fèi)在那里。色塊越長(zhǎng)，問(wèn)題越大。
幀模式（Frames mode）用來(lái)查看單個(gè)幀的耗時(shí)情況。每幀的色柱高度越低越好，表示耗時(shí)少。
你可以看到，幀模式有兩條水平的參考線。
下面的一條是 60FPS，低于這條線，可以達(dá)到每秒 60 幀；上面的一條是 30FPS，低于這條線，可以達(dá)到每秒 30 次渲染。如果色柱都超過(guò) 30FPS，這個(gè)網(wǎng)頁(yè)就有性能問(wèn)題了。
此外，還可以查看某個(gè)區(qū)間的耗時(shí)情況。
或者點(diǎn)擊每一幀，查看該幀的時(shí)間構(gòu)成。
七、window.requestAnimationFrame ()
有一些 JavaScript 方法可以調(diào)節(jié)重新渲染，大幅提高網(wǎng)頁(yè)性能。
其中最重要的，就是 window.requestAnimationFrame () 方法。它可以將某些代碼放到下一次重新渲染時(shí)執(zhí)行。
- function doubleHeight (element) {
- var currentHeight = element.clientHeight;
- element.style.height = (currentHeight * 2) + 'px';
- }
- elements.forEach (doubleHeight);
上面的代碼使用循環(huán)操作，將每個(gè)元素的高度都增加一倍?？墒牵看窝h(huán)都是，讀操作后面跟著一個(gè)寫操作。這會(huì)在短時(shí)間內(nèi)觸發(fā)大量的重新渲染，顯然對(duì)于網(wǎng)頁(yè)性能很不利。
我們可以使用window.requestAnimationFrame ()，讓讀操作和寫操作分離，把所有的寫操作放到下一次重新渲染。
- function doubleHeight (element) {
- var currentHeight = element.clientHeight;
- window.requestAnimationFrame (function () {
- element.style.height = (currentHeight * 2) + 'px';
- });
- }
- elements.forEach (doubleHeight);
頁(yè)面滾動(dòng)事件（scroll）的監(jiān)聽(tīng)函數(shù)，就很適合用 window.requestAnimationFrame () ，推遲到下一次重新渲染。
- $(window) .on ('scroll', function() {
- window.requestAnimationFrame (scrollHandler);
- });
當(dāng)然，最適用的場(chǎng)合還是網(wǎng)頁(yè)動(dòng)畫。下面是一個(gè)旋轉(zhuǎn)動(dòng)畫的例子，元素每一幀旋轉(zhuǎn) 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 ()
還有一個(gè)函數(shù) window.requestIdleCallback ()，也可以用來(lái)調(diào)節(jié)重新渲染。
它指定只有當(dāng)一幀的末尾有空閑時(shí)間，才會(huì)執(zhí)行回調(diào)函數(shù)。
- requestIdleCallback (fn);
上面代碼中，只有當(dāng)前幀的運(yùn)行時(shí)間小于 16.66ms 時(shí)，函數(shù) fn 才會(huì)執(zhí)行。否則，就推遲到下一幀，如果下一幀也沒(méi)有空閑時(shí)間，就推遲到下下一幀，以此類推。
它還可以接受第二個(gè)參數(shù)，表示指定的毫秒數(shù)。如果在指定的這段時(shí)間之內(nèi)，每一幀都沒(méi)有空閑時(shí)間，那么函數(shù) fn 將會(huì)強(qiáng)制執(zhí)行。
- requestIdleCallback (fn, 5000);
上面的代碼表示，函數(shù) fn 最遲會(huì)在 5000 毫秒之后執(zhí)行。
函數(shù) fn 可以接受一個(gè) deadline 對(duì)象作為參數(shù)。
- requestIdleCallback (function someHeavyComputation (deadline) {
- while(deadline.timeRemaining () > 0) {
- doWorkIfNeeded ();
- }
- if(thereIsMoreWorkToDo) {
- requestIdleCallback (someHeavyComputation);
- }
- });
上面代碼中，回調(diào)函數(shù) someHeavyComputation 的參數(shù)是一個(gè) deadline 對(duì)象。
deadline 對(duì)象有一個(gè)方法和一個(gè)屬性：timeRemaining () 和 didTimeout。
（1）timeRemaining () 方法
timeRemaining () 方法返回當(dāng)前幀還剩余的毫秒。這個(gè)方法只能讀，不能寫，而且會(huì)動(dòng)態(tài)更新。因此可以不斷檢查這個(gè)屬性，如果還有剩余時(shí)間的話，就不斷執(zhí)行某些任務(wù)。一旦這個(gè)屬性等于0，就把任務(wù)分配到下一輪requestIdleCallback。
前面的示例代碼之中，只要當(dāng)前幀還有空閑時(shí)間，就不斷調(diào)用 doWorkIfNeeded 方法。一旦沒(méi)有空閑時(shí)間，但是任務(wù)還沒(méi)有全執(zhí)行，就分配到下一輪requestIdleCallback。
（2）didTimeout 屬性
deadline 對(duì)象的 didTimeout 屬性會(huì)返回一個(gè)布爾值，表示指定的時(shí)間是否過(guò)期。這意味著，如果回調(diào)函數(shù)由于指定時(shí)間過(guò)期而觸發(fā)，那么你會(huì)得到兩個(gè)結(jié)果。
- timeRemaining 方法返回0
- didTimeout 屬性等于 true
因此，如果回調(diào)函數(shù)執(zhí)行了，無(wú)非是兩種原因：當(dāng)前幀有空閑時(shí)間，或者指定時(shí)間到了。
- function myNonEssentialWork (deadline) {
- while ((deadline.timeRemaining () > 0 || deadline.didTimeout) && tasks.length > 0)
- doWorkIfNeeded ();
- if (tasks.length > 0)
- requestIdleCallback (myNonEssentialWork);
- }
- requestIdleCallback (myNonEssentialWork, 5000);
上面代碼確保了，doWorkIfNeeded 函數(shù)一定會(huì)在將來(lái)某個(gè)比較空閑的時(shí)間（或者在指定時(shí)間過(guò)期后）得到反復(fù)執(zhí)行。
requestIdleCallback 是一個(gè)很新的函數(shù)，剛剛引入標(biāo)準(zhǔn)，目前只有 Chrome 支持。
九、參考鏈接
- Domenico De Felice, How browsers work
- Stoyan Stefanov， Rendering: repaint, reflow/relayout, restyle
- Addy Osmani, Improving Web App Performance With the Chrome DevTools Timeline and Profiles
- Tom Wiltzius, Jank Busting for Better Rendering Performance
- Paul Lewis, Using requestIdleCallback
