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

PS:最新版本的Chrome已經支持該功能

查看頁面的渲染時間

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

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

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

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

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

2.動畫不定期更新。

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

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

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

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

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

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

CONTINUOUS PAINTING MODE

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

安裝

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

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

開始操作

開啟監測：

打開paint rectangle和顯示面板:

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

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

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

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

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

具體步驟

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

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

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

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

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

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

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

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

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

演示地址:

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。