Chrome Canary（Chrome “金絲雀版本”）目前已經(jīng)支持Continuous painting mode，用于分析頁面性能。這篇文章將會介紹怎么才能頁面在繪制過程中找到問題和怎么利用這個新的工具來解決頁面性能上的瓶頸。

PS:最新版本的Chrome已經(jīng)支持該功能

查看頁面的渲染時間

我們采用Things We Left On The Moon?by?Dan Cederholm的頁面來作為我們的例子頁面。

打開Chrome的Web Inspector（即按F12），選擇Timeline頁卡，并且上下滾動頁面（頁面滾動，瀏覽器發(fā)生重繪）。你會看到一堆垂直的時間線，鼠標點擊每根線，就能看到每一幀頁面的繪制情況。

如果你看到時間都花在繪制頁面（大片綠色都在60fps上面）上面，那么你就需要去仔細看看出了什么狀況。為了查明原因，利用Show paint rectangles選項，移到鼠標到頁面會出現(xiàn)矩形框，這里框定了Chrome繪制頁面的區(qū)域，同時Web Inspector 也記錄了該區(qū)域的信息。

下面是Chrome重繪頁面的幾個原因：

1.Dom節(jié)點被Javascript改變，導致Chrome重新計算頁面的layout。

2.動畫不定期更新。

3.用戶交互，如hover導致頁面某些元素頁面樣式的變化。

4.其他的操作導致頁面layout的改變。?

作為一個開發(fā)者你需要關(guān)注到頁面上發(fā)生的重繪。然而利用paint rectangle你就能夠觀察到這些問題，就像截圖軟件一樣在頁面上畫個矩形。如果你滾動頁面則整個屏幕都會重繪。有個特例，CSS樣式中的background-attachment：fixed，能讓背景圖片在頁面上停留在固定位置而不隨著你滾動頁面而改變。

如果你確定重繪在頁面上大面積發(fā)生或者花了很長時間，你可以有兩種做法解決：

1.試著去改變頁面的layout來減少重繪的數(shù)量。一般情況下Chrome只會重繪一次那些可見的頁面區(qū)域還有滾動時的可見區(qū)域。有些情況下Chrome不得不去重繪某些區(qū)域，例如經(jīng)常用來固定導航條的樣式position：fixed，就會導致這種重繪。

2.如果你不想改變頁面layout，你可以試著去減少重繪的發(fā)生。并不是所有的樣式的重繪開銷都一樣，有的影響大，有的小。利用Elements面板來記錄不同樣式所帶來的開銷，從中做出比對，選擇合適的樣式應(yīng)用到元素中。下面介紹Continuous painting mode的用法。

CONTINUOUS PAINTING MODE

Continuous painting mode能夠讓你確定哪些元素耗費了多少資源，它能夠讓頁面進入重繪狀態(tài)，并把重繪的過程通過數(shù)據(jù)展現(xiàn)出來。為了找出資源開銷大的元素，你可以通過隱藏元素和改變樣式的同時，并結(jié)合右上角的面板來得出結(jié)論。

安裝

在原文發(fā)表之前，Continuous painting mode只能在Chrome Canary上得到體驗。現(xiàn)在只需要更新你的Chrome到最新版本，按F12,設(shè)置一下即可。?

在Linux系統(tǒng)和一些MAC系統(tǒng)下，需要確保Chrome開啟了混合模式，方法是地址欄輸入about:flags，然后啟用GPU compositing on all pages。

開始操作

開啟監(jiān)測：

打開paint rectangle和顯示面板:

右上角的面板呈現(xiàn)出的是以毫秒為單位測算出的繪制時間。如：

1.最后測量的繪制時間在最左邊。

2.最小值和最高值在圖表的右邊。

3.下面的柱形圖表示最后80幀（每16毫秒為一個測速點）。繪制時間的測量值由屏幕分辨率，屏幕大小和設(shè)備硬件性能決定的，因此要考慮到用戶的操作環(huán)境不同數(shù)值也會有所差異

PS:最新版的面板如下圖：

具體步驟

制造更多的重繪能讓你知道continuous painting mode是怎么查看到頁面元素和樣式的：?

1.打開Web Inspector的設(shè)置，勾選Enable continuous page repainting。?

2.到Elements面板，用鼠標在節(jié)點樹上面來回的移動或者在頁面選中元素。

3.利用快捷方式H鍵，通過綁定visibility樣式來顯示隱藏元素。

4.查看繪制時間的曲線圖，試著去點擊一個元素來讓圖表繪制顯示更多的時間曲線。

5.通過勾選右側(cè)的樣式復選框來控制樣式，來測試渲染該樣式帶來頁面開銷。

6.通過改變樣式來測試是否頁面性能更優(yōu)。

下面的動畫展示的綁定樣式對繪制時間的影響：

這個例子說明了當關(guān)掉box-shadow和border-radius時，減少了大量的重繪時間。同時運用這兩個樣式的帶來了昂貴的重繪開銷，因為Chrome并沒有對它們做出優(yōu)化。所以如果你的頁面某個元素會有大量的重繪，你應(yīng)該避免類似的組合。

演示地址:

如果你能FQ的話，可以點擊看看~http://www.youtube.com/embed/FY5iiuQRyEE?start=683&end=788
譯自：Profiling Long Paint Times with DevTools' Continuous Painting Mode

總結(jié)

以上是生活随笔為你收集整理的使用Chrome工具来分析页面的绘制状态的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。