連續繪圖模式現已在 Chrome Canary 中推出，可用於繪圖剖析。本文將說明如何找出網頁繪製時間的問題，以及如何使用這項新工具偵測繪製效能瓶頸。
調查網頁上的繪圖時間
您發現網頁無法順暢捲動。您可以透過這種方式著手解決問題。在本例中，我們會使用 Dan Cederholm 的示範頁面「Things We Left On The Moon」做為範例。
您開啟 Web Inspector、開始時間軸錄製，然後上下捲動網頁。接著，您可以查看垂直時間軸，瞭解每個畫面發生的情況。
如果您發現大部分時間都花在繪製作業上 (60fps 以上的大綠色長條)，就需要進一步查看發生這種情況的原因。如要調查您的繪圖作業，請使用 Web Inspector 的「Show paint rectangles」設定 (Web Inspector 右下角的齒輪圖示)。這會顯示 Chrome 繪製的區域。
Chrome 重繪網頁區域的原因有很多：
- DOM 節點會在 JavaScript 中變更，導致 Chrome 重新計算網頁版面配置。
- 動畫會在以影格為基礎的週期中播放及更新。
- 使用者互動 (例如游標懸停) 會導致特定元素的樣式變更。
- 任何會導致頁面版面配置變更的其他作業。
開發人員必須瞭解網頁上發生的重新繪製作業。查看繪圖矩形是瞭解這點的好方法。在上述範例螢幕截圖中，您可以看到整個畫面都覆蓋在一個大型繪圖矩形中。這表示在捲動時會重新繪製整個畫面，這並不是好事。在這個特定情況中，這是由 CSS 樣式 background-attachment:fixed 造成的，該樣式會導致頁面的背景圖片停留在相同位置，而頁面內容會在您捲動時移至其上方。
如果您發現重繪作業涵蓋的範圍很大，且/或需要花費很長的時間，則有兩種做法可供選擇：
- 您可以嘗試變更頁面版面配置，以減少繪製次數。在可行的情況下，Chrome 只會繪製一次可見的網頁，並在您向下捲動時新增未顯示的部分。不過，在某些情況下，Chrome 需要重新繪製特定區域。舉例來說，CSS 規則
position:fixed通常用於停留在相同位置的導覽元素，可能會導致這些重繪作業。 - 如果您想保留網頁版面配置，可以嘗試減少重繪區域的繪圖成本。並非每種 CSS 樣式都有相同的繪圖成本，有些影響不大，有些影響很大。要計算特定風格繪圖的成本可能需要花費大量心力。方法是切換「元素」面板中的樣式，並查看「時間軸」錄製畫面中的差異，也就是在面板之間切換並進行大量錄製。這時就需要連續繪圖模式了。
連續繪圖模式
持續繪圖模式是一項工具，可協助您找出網頁上哪些元素會造成效能損失。它會將網頁設為一律重繪狀態，並顯示計數器，顯示正在進行多少繪圖工作。接著，您可以隱藏元素並變異樣式，並觀察計數器，以便找出速度較慢的項目。
設定
如要使用連續繪圖模式，您必須使用 Chrome Canary。
在 Linux 系統 (和部分 Mac) 上，您必須確保 Chrome 在合成模式下執行。您可以使用 about:flags 中的「在所有頁面上使用 GPU 合成」設定，永久啟用這項功能。
如何開始
您可以透過 Web Inspector 設定中的「Enable continuous page repainting」核取方塊，啟用「Continuous painting mode」。Web Inspector 設定位於 Web Inspector 右下角的齒輪圖示。
右上角的小型顯示畫面會以毫秒為單位顯示測量到的繪圖時間。具體來說，這項功能會顯示：
- 左側為上次測量到的顯示時間。
- 目前圖表的最大值和最小值 (右側)。
- 長條圖，底部顯示過去 80 個影格記錄 (圖表中的線條表示 16 毫秒的參考點)。
繪製時間的測量結果取決於螢幕解析度、視窗大小和 Chrome 執行的硬體。請注意，這些項目對使用者來說可能有所不同。
工作流程
以下是使用連續繪圖模式追查會增加大量繪圖成本的元素和樣式的方法：
- 開啟 Web Inspector 的設定，然後勾選「Enable continuous page repainting」。
- 前往「元素」面板，然後使用方向鍵或選取頁面上的元素，逐一檢視 DOM 樹狀結構。
- 使用新推出的輔助功能 H 鍵盤快速鍵，切換元素的顯示/隱藏狀態。
- 查看繪製時間圖表，並嘗試找出會增加繪製時間的元素。
- 查看該元素的 CSS 樣式，並在查看圖表時切換開關，找出導致速度變慢的樣式。
- 變更這類樣式，並執行另一次時間軸記錄，確認這是否有助於改善網頁成效。
以下動畫顯示切換樣式，以及對繪圖時間的影響：
本範例說明如何關閉 CSS 樣式 box-shadow 或 border-radius，大幅縮短繪圖時間。在元素上同時使用 box-shadow 和 border-radius 會導致繪圖作業成本高昂，因為 Chrome 無法為此進行最佳化。因此，如果您有像範例中那樣經常重繪的元素，請避免使用這種組合。
附註
連續繪圖模式會重新繪製整個可見頁面。但在瀏覽網頁時，通常不會發生這種情況。捲動畫面時，系統通常只會繪製先前未顯示的部分。至於網頁上的其他變更，則只會重新繪製最小的區域。因此，請透過另一個時間軸記錄，確認您的樣式改善措施是否確實影響網頁的繪製時間。
使用 continuous painting mode 時，您可能會發現 CSS 樣式 border-radius 和 box-shadow 會增加大量繪製時間。我們並未禁止使用這些功能，因為這些功能非常實用，我們很高興終於推出這些功能。不過，您必須瞭解何時何地可使用這些功能。請避免在需要大量重繪的區域中使用，並避免過度使用。
現場示範
按一下下方連結，觀看 Paul Irish 使用持續繪圖功能，找出耗用資源較多的繪圖作業。