Chrome Canary 現已推出持續繪製模式，可用於進行油漆剖析。本文說明如何找出頁面繪製時間的問題，以及如何使用這項新工具偵測繪製效能的瓶頸。
調查網頁上的繪製時間
因此發現網頁無法流暢捲動。這就是解決該問題的方法。在這個範例中，我們會使用 Dan Cederholm 的「Things We Left On The Moon」示範頁面做為範例。
開啟網頁檢查器後，啟動時間軸記錄功能，然後上下捲動網頁。接著查看垂直時間軸，瞭解每個影格的情況。
如果您發現大部分的時間都在繪畫 (每秒超過 60 個影格的大綠色長條)，就必須進一步瞭解這個發生的原因。如要調查繪製內容，請使用網頁檢查器的「Show paint Pains」設定 (網頁檢查器右下角的 Cog 圖示)。這會顯示 Chrome 繪製的區域。
Chrome 基於各種原因需要重新繪製網頁區域：
- DOM 節點在 JavaScript 中有所變更，導致 Chrome 重新計算網頁版面配置。
- 動畫會在以影格為基礎的循環中更新。
- 使用者互動 (例如懸停) 會變更特定元素的樣式。
- 造成網頁版面配置變更的任何其他作業。
開發人員必須瞭解網頁上的重新繪製情形。
看著顏料矩形是很好的做法。在上方的範例螢幕截圖中，您可以看到整個畫面被覆蓋著大幅矩形。這表示當您捲動畫面時，整個畫面都會重新繪製，但這並不好。在這個特定情況下，是因為 CSS 樣式 background-attachment:fixed 會導致網頁的背景圖片固定在相同位置，但頁面內容會隨著捲動而移到上方。
如果您發現重新繪製涵蓋大範圍區域且/或花費較長時間，有兩種做法：
- 你可以嘗試變更頁面版面配置，減少繪畫量。如果可能的話，Chrome 只會繪製顯示的網頁一次，並添加您向下捲動時看不到的部分。不過，Chrome 有時也會需要重新繪製特定區域。舉例來說，CSS 規則
position:fixed通常用於固定位置的導覽元素，可能會造成重新繪製。 - 如要保留網頁版面配置，您可以嘗試減少重新繪製區域的繪畫成本。並非所有 CSS 樣式的繪製費用都相同、有些影響不大，其他則沒有太大影響。釐清特定風格的繪畫費用可能相當費工。如要進行這項操作，您可以在「元素」面板中切換樣式，然後查看時間軸記錄的不同之處，也就是切換面板及進行大量錄製內容。這時持續繪製模式就能派上用場。
連續繪製模式
持續繪製模式這項工具可協助您找出頁面上哪些元素昂貴。這項工具會將頁面呈現隨時重新繪製的狀態，顯示畫作正在進行。接著，您可以隱藏元素並改變樣式，並查看計數器，以找出速度緩慢的原因。
設定
您必須使用 Chrome Canary，才能使用持續繪製模式。
在 Linux 系統 (和部分 Mac) 上，您必須確保 Chrome 以合成模式執行。這項設定可以使用 about:flags 中的「所有頁面上的 GPU 合成」設定來永久啟用。
入門教學
勾選網頁檢查器設定 (網頁檢查器右下角的 Cog 圖示) 的核取方塊，即可啟用「持續繪製模式」。
右上角的小螢幕會以毫秒為單位顯示測量的繪製時間。更具體的節目內容如下：
- 左側上次測量的繪製時間。
- 右側目前圖表的最小值和最大值。
- 畫面底部的長條圖顯示最近 80 個影格的記錄 (圖表中的線條代表參考點為 16 毫秒)。
繪製時間測量結果取決於螢幕解析度、視窗大小，以及執行 Chrome 的硬體。請注意，這對您的使用者可能會有所不同。
工作流程
以下說明如何使用持續繪製模式，追蹤會產生大量繪製費用的元素和樣式：
- 開啟 Web Inspector 設定，並勾選「啟用連續頁面重新繪製功能」。
- 前往「Elements」(元素) 面板，然後使用方向鍵或挑選網頁上的元素，穿越 DOM 樹狀結構。
- 使用我們新推出的輔助程式 H 鍵盤快速鍵切換元素的顯示設定。
- 查看顏料時間圖表，試著找出會拉長繪製時間的元素。
- 瀏覽該元素的 CSS 樣式，並分別查看和開啟或關閉圖表，找出導致速度變慢的樣式。
- 請變更這個樣式，並再次記錄時間軸，檢查網頁成效是否有所提升。
下方動畫展示了切換樣式及其對繪製時間的影響：
這個範例說明如何關閉任一 CSS 樣式 box-shadow 或 border-radius，能大幅減少繪製時間。在元素上同時使用 box-shadow 和 border-radius 會導致繪製作業耗用大量資源，因為 Chrome 無法進行最佳化。因此，如果您的元素會進行大量重新繪製 (例如範例中所示)，就應該避免這種組合。
附註
持續繪製模式會重新繪製整個顯示頁面。在瀏覽網頁時，通常不會發生這種情況。捲動通常只會繪製過去從未可見的部分對於頁面上的其他變更，系統只會重新繪製最小的區域。因此，請再次使用時間軸錄製功能，確認改善樣式是否確實影響了頁面的繪製時間。
使用 continuous painting mode 時，您可能會發現這一點，例如 CSS 樣式 border-radius 和 box-shadow 會拉長繪製時間。我們不建議在一般情況下使用這些功能，而且這些功能令人滿意，我們終於決定使用這些功能。但請務必瞭解這些工具的使用時機和位置。請避免在有大量重新繪製的區域使用，一般避免過度使用。
現場示範
請點選下方的示範教學，看看保羅愛爾蘭如何運用持續繪畫來識別昂貴的油漆作業。