Web性能優化系列(2):剖析頁面繪制時間

最近,我參加瞭在倫敦舉辦的Facebook移動開發者大會。在那天期間,有很多的交談,但真正讓我關註的是一場關於性能的,名為讓m.facebook.com更快的交流會,它的主題是關於Facebook如何不斷努力改善網頁性能和從中汲取的經驗。

Facebook開發團隊是使用Chrome Cannry來測試網頁CSS性能的。Google Chrome Canary擁有Chrome的最新特性,並允許試用一些即將成為Chrome標準版本的,可行的最新特性。考慮到Chrome Canary作為一個為開發者和嘗鮮者專門設計的預覽版,所以有時候會因Chrome開發團隊的快速迭代而導致一些B UG。盡管如此,它仍然有一些很棒的開發者工具幫助你測試網頁性能

在這篇文章裡,我展示如何使用Chrome Canary的開發者工具去定位你的CSS中的一部分,這部分CSS可能會導致頁面滾動緩慢和影響頁面的繪制時間。當瀏覽器加載和繪制頁面時,為瞭繪制並讓內容顯示在屏幕上,需要遍歷所有可見元素。由於這依賴於佈局和復雜的CSS,你可能會發現繪制時間會很長。這會導致網頁看起來忽動忽停和響應較慢。這種緩慢滾動也稱為jank(jank是Android系統的一個專業術語,指的是屏幕上流暢動態畫面中斷的卡頓現象)。在移動設備上滾動頁面時,瀏覽器會使勁地繪制復雜的CSS,這時這種情況更加明顯。

即使頁面的加載時間十分快,也仍然值得去研究頁面的繪制時間。不同設備對CSS屬性有著不一樣的反應,但無論如何,能提高性能總是一件很好的事。為瞭進行測試,首先得去Google Chrome網站下載Chrome Canary。一旦安裝完成,就可以打開你想測試的網頁。HTML5 Rocks網站裡有一個很好的案例網站,我們使用它來證明高耗能CSS屬性的操作,會增加頁面的繪制時間。

一旦你打開到這個網頁,按下F12,會彈出Chrome的開發者工具。然後在開發者工具的底部右側點擊設置按鈕,開啟測試頁面渲染性能的設置。

點擊後會顯示一個允許你更改設置的控制板。

因為我們要測試頁面的渲染性能,所以選擇Enable continuous page repainting(頁面持續重新繪制)Show FPS meter(顯示FPS儀表)。如果你關閉設置面板,查看你的網頁,你應該會看到下面的圖片在頁面右上角。

該表顯示以毫秒為單位的當前頁面繪制所需時間,而右側顯示瞭當前圖表的最小與最大值。另外,也顯示瞭最近80幀的樹狀圖。這個圖表的強大之處是它不斷試圖重新繪制頁面,使得頁面好像是第一次加載。這允許你精確定位因CSS影響的繪制問題,而不用每次重新加載頁面。無論你的改變是否產生影響,樹狀圖都會持續監測。

如果我們詳細查看這個頁面的HTML和CSS,你會看到其中一個div添加瞭一些CSS效果。

這個div有border-radius(圓角)和投影屬性。當移除box-shadow屬性,再觀察FPS meter在繪制時間的變化。

哇!正如你從圖表可看出,頁面繪制時間有一個令人關註的變化。通過簡單地將border-radius屬性移除,就可以證明這個改變能讓頁面的繪制時間顯著減少。當你更新或改變CSS屬性時,這個圖表就立即下降。在同一個元素上同時使用box-shadowborder-radius,會導致非常重的繪制負擔,這是因為瀏覽器不能為之做出優化。如果有一個元素需要頻繁的重復繪制,你應該在建立網頁時時刻記住這點。

這是一個很好的,在Google IO 網站上的視頻,它更深入地闡述繪制時間,並介紹一些減少網頁jank(卡頓)的技巧。

想更進一步學習繪制時間的優化,看看這些鏈接。

延伸閱讀:

  • Web性能優化系列(1):Web性能優化分析
  • Web性能優化:What?Why?How?
  • Web性能優化系列(3):如何延遲加載JS