你遇到過性能很差的網頁嗎? 這種網頁響應非常緩慢,占用大量的CPU和記憶體,瀏覽起來常常有卡頓,頁面的動畫效果也不流暢。 你會有什麼反應?我猜想,大多數用戶會關閉這個頁面,改為訪問其他網站。作為一個開發者,肯定不願意看到這種情況,那麼怎樣才能提高性能呢? 本文將詳細介紹性能問題的出現原因,以及解決方法 ...
你遇到過性能很差的網頁嗎?
這種網頁響應非常緩慢,占用大量的CPU和記憶體,瀏覽起來常常有卡頓,頁面的動畫效果也不流暢。
你會有什麼反應?我猜想,大多數用戶會關閉這個頁面,改為訪問其他網站。作為一個開發者,肯定不願意看到這種情況,那麼怎樣才能提高性能呢?
本文將詳細介紹性能問題的出現原因,以及解決方法。
一、網頁生成的過程
要理解網頁性能為什麼不好,就要瞭解網頁是怎麼生成的。
網頁的生成過程,大致可以分成五步。
- HTML代碼轉化成DOM
- CSS代碼轉化成CSSOM(CSS Object Model)
- 結合DOM和CSSOM,生成一棵渲染樹(包含每個節點的視覺信息)
- 生成佈局(layout),即將所有渲染樹的所有節點進行平面合成
- 將佈局繪製(paint)在屏幕上
這五步裡面,第一步到第三步都非常快,耗時的是第四步和第五步。
“生成佈局”(flow)和”繪製”(paint)這兩步,合稱為”渲染”(render)。
二、重排和重繪
網頁生成的時候,至少會渲染一次。用戶訪問的過程中,還會不斷重新渲染。
以下三種情況,會導致網頁重新渲染。
- 修改DOM
- 修改樣式表
- 用戶事件(比如滑鼠懸停、頁面滾動、輸入框鍵入文字、改變視窗大小等等)
重新渲染,就需要重新生成佈局和重新繪製。前者叫做”重排”(reflow),後者叫做”重繪”(repaint)。
需要註意的是,“重繪”不一定需要”重排”,比如改變某個網頁元素的顏色,就只會觸發”重繪”,不會觸發”重排”,因為佈局沒有改變。但是,“重排”必然導致”重繪”,比如改變一個網頁元素的位置,就會同時觸發”重排”和”重繪”,因為佈局改變了。
三、對於性能的影響
重排和重繪會不斷觸發,這是不可避免的。但是,它們非常耗費資源,是導致網頁性能低下的根本原因。
提高網頁性能,就是要降低”重排”和”重繪”的頻率和成本,儘量少觸發重新渲染。
前面提到,DOM變動和樣式變動,都會觸發重新渲染。但是,瀏覽器已經很智能了,會儘量把所有的變動集中在一起,排成一個隊列,然後一次性執行,儘量避免多次重新渲染。
div.style.color = 'blue'; div.style.marginTop = '30px';
上面代碼中,div元素有兩個樣式變動,但是瀏覽器只會觸發一次重排和重繪。
如果寫得不好,就會觸發兩次重排和重繪。
div.style.color = 'blue'; var margin = parseInt(div.style.marginTop); div.style.marginTop = (margin + 10) + 'px';
上面代碼對div元素設置背景色以後,第二行要求瀏覽器給出該元素的位置,所以瀏覽器不得不立即重排。
一般來說,樣式的寫操作之後,如果有下麵這些屬性的讀操作,都會引發瀏覽器立即重新渲染。
- offsetTop/offsetLeft/offsetWidth/offsetHeight
- scrollTop/scrollLeft/scrollWidth/scrollHeight
- clientTop/clientLeft/clientWidth/clientHeight
- getComputedStyle()
所以,從性能角度考慮,儘量不要把讀操作和寫操作,放在一個語句裡面。
// 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";
一般的規則是:
- 樣式表越簡單,重排和重繪就越快。
- 重排和重繪的DOM元素層級越高,成本就越高。
- table元素的重排和重繪成本,要高於div元素
四、提高性能的九個技巧
有一些技巧,可以降低瀏覽器重新渲染的頻率和成本。
第一條是上一節說到的,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() 這兩個方法調節重新渲染(詳見後文)。
五、刷新率
很多時候,密集的重新渲染是無法避免的,比如scroll事件的回調函數和網頁動畫。
網頁動畫的每一幀(frame)都是一次重新渲染。每秒低於24幀的動畫,人眼就能感受到停頓。一般的網頁動畫,需要達到每秒30幀到60幀的頻率,才能比較流暢。如果能達到每秒70幀甚至80幀,就會極其流暢。
大多數顯示器的刷新頻率是60Hz,為了與系統一致,以及節省電力,瀏覽器會自動按照這個頻率,刷新動畫(如果可以做到的話)。
所以,如果網頁動畫能夠做到每秒60幀,就會跟顯示器同步刷新,達到最佳的視覺效果。這意味著,一秒之內進行60次重新渲染,每次重新渲染的時間不能超過16.66毫秒。
一秒之間能夠完成多少次重新渲染,這個指標就被稱為”刷新率”,英文為FPS(frame per second)。60次重新渲染,就是60FPS。
如果想達到60幀的刷新率,就意味著JavaScript線程每個任務的耗時,必須少於16毫秒。一個解決辦法是使用Web Worker,主線程只用於UI渲染,然後跟UI渲染不相干的任務,都放在Worker線程。
六、開發者工具的Timeline面板
Chrome瀏覽器開發者工具的Timeline面板,是查看”刷新率”的最佳工具。這一節介紹如何使用這個工具。
首先,按下 F12 打開”開發者工具”,切換到Timeline面板。
左上角有一個灰色的圓點,這是錄製按鈕,按下它會變成紅色。然後,在網頁上進行一些操作,再按一次按鈕完成錄製。
Timeline面板提供兩種查看方式:橫條的是”事件模式”(Event Mode),顯示重新渲染的各種事件所耗費的時間;豎條的是”幀模式”(Frame Mode),顯示每一幀的時間耗費在哪裡。
先看”事件模式”,你可以從中判斷,性能問題發生在哪個環節,是JavaScript的執行,還是渲染?
不同的顏色表示不同的事件。
- 藍色:網路通信和HTML解析
- 黃色:JavaScript執行
- 紫色:樣式計算和佈局,即重排
- 綠色:重繪
哪種色塊比較多,就說明性能耗費在那裡。色塊越長,問題越大。
幀模式(Frames mode)用來查看單個幀的耗時情況。每幀的色柱高度越低越好,表示耗時少。
你可以看到,幀模式有兩條水平的參考線。
下麵的一條是60FPS,低於這條線,可以達到每秒60幀;上面的一條是30FPS,低於這條線,可以達到每秒30次渲染。如果色柱都超過30FPS,這個網頁就有性能問題了。
此外,還可以查看某個區間的耗時情況。
或者點擊每一幀,查看該幀的時間構成。
七、window.requestAnimationFrame()
有一些JavaScript方法可以調節重新渲染,大幅提高網頁性能。
其中最重要的,就是 window.requestAnimationFrame() 方法。它可以將某些代碼放到下一次重新渲染時執行。
function doubleHeight(element) { var currentHeight = element.clientHeight; element.style.height = (currentHeight * 2) + 'px'; } elements.forEach(doubleHeight);
上面的代碼使用迴圈操作,將每個元素的高度都增加一倍。可是,每次迴圈都是,讀操作後面跟著一個寫操作。這會在短時間內觸發大量的重新渲染,顯然對於網頁性能很不利。
我們可以使用window.requestAnimationFrame()
,讓讀操作和寫操作分離,把所有的寫操作放到下一次重新渲染。
function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); } elements.forEach(doubleHeight);
頁面滾動事件(scroll)的監聽函數,就很適合用 window.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()
還有一個函數window.requestIdleCallback(),也可以用來調節重新渲染。
它指定只有當一幀的末尾有空閑時間,才會執行回調函數。
requestIdleCallback(fn);
上面代碼中,只有當前幀的運行時間小於16.66ms時,函數fn才會執行。否則,就推遲到下一幀,如果下一幀也沒有空閑時間,就推遲到下下一幀,以此類推。
它還可以接受第二個參數,表示指定的毫秒數。如果在指定 的這段時間之內,每一幀都沒有空閑時間,那麼函數fn將會強制執行。
requestIdleCallback(fn, 5000);
上面的代碼表示,函數fn最遲會在5000毫秒之後執行。
函數 fn 可以接受一個 deadline 對象作為參數。
requestIdleCallback(function someHeavyComputation(deadline) { while(deadline.timeRemaining() > 0) { doWorkIfNeeded(); } if(thereIsMoreWorkToDo) { requestIdleCallback(someHeavyComputation); } });
上面代碼中,回調函數 someHeavyComputation 的參數是一個 deadline 對象。
deadline對象有一個方法和一個屬性:timeRemaining() 和 didTimeout。
(1)timeRemaining() 方法
timeRemaining() 方法返回當前幀還剩餘的毫秒。這個方法只能讀,不能寫,而且會動態更新。因此可以不斷檢查這個屬性,如果還有剩餘時間的話,就不斷執行某些任務。一旦這個屬性等於0,就把任務分配到下一輪requestIdleCallback
。
前面的示例代碼之中,只要當前幀還有空閑時間,就不斷調用doWorkIfNeeded方法。一旦沒有空閑時間,但是任務還沒有全執行,就分配到下一輪requestIdleCallback
。
(2)didTimeout屬性
deadline對象的 didTimeout
屬性會返回一個布爾值,表示指定的時間是否過期。這意味著,如果回調函數由於指定時間過期而觸發,那麼你會得到兩個結果。
- timeRemaining方法返回0
- didTimeout 屬性等於 true
因此,如果回調函數執行了,無非是兩種原因:當前幀有空閑時間,或者指定時間到了。
function myNonEssentialWork (deadline) { while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) doWorkIfNeeded(); if (tasks.length > 0) requestIdleCallback(myNonEssentialWork); } requestIdleCallback(myNonEssentialWork, 5000);
上面代碼確保了,doWorkIfNeeded 函數一定會在將來某個比較空閑的時間(或者在指定時間過期後)得到反覆執行。
requestIdleCallback 是一個很新的函數,剛剛引入標準,目前只有Chrome支持,不過其他瀏覽器可以用墊片庫。