Chrome Canary 現已推出用於繪製剖析的持續繪製模式。本文說明如何找出網頁繪製時間中的問題，以及如何使用這項新工具偵測繪畫效能的瓶頸。
調查網頁上的繪製時間
因此你發現頁面捲動過程並不順利。這就是開始解決問題的方式在這個範例中，我們會以 Dan Cederholm 的《Things We Left On The Moon》示範頁面做為範例。
您開啟網頁檢查器，啟動時間軸記錄，然後上下捲動網頁。然後查看垂直時間軸，瞭解各影格發生的情況。
如果看到大多數時間都花在繪製 (60fps 以上的大型綠色長條)，就需要進一步瞭解問題的原因。如要調查繪畫，請使用網頁檢查器的「Show Paint 矩形」設定 (網頁檢查器右下角的 Cog 圖示)。就會看到 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 sre Paing」(啟用持續繪製模式) 核取方塊，以啟用「持續繪製模式」。
右上角的小螢幕會以毫秒為單位顯示測量的繪製時間。具體來說，它會顯示：
- 左側上次測量的繪製時間。
- 右側目前圖表的最小值和最大值。
- 長條圖底部會顯示最近 80 個影格的記錄 (圖表中的線條是指參考點為 16 毫秒)。
繪製時間測量結果取決於螢幕解析度、視窗大小，以及 Chrome 執行的硬體。請注意，這些因素可能會受到使用者的影響
工作流程
您可以利用連續繪製模式追蹤會增加大量繪製成本的元素和樣式：
- 開啟「網頁檢查器」的設定，然後勾選「啟用持續分頁重新繪製功能」。
- 前往「元素」面板並使用方向鍵或選取網頁上的元素，藉此掃遍 DOM 樹狀結構。
- 如要切換元素的顯示設定，請使用 H 鍵盤快速鍵 (我們新推出的輔助工具)。
- 查看繪製時間圖，試著找出會延長繪製時間的元素。
- 瀏覽該元素的 CSS 樣式，並在查看圖表時開啟或關閉這些樣式，找出導致速度變慢的樣式。
- 請變更這個樣式，並進行其他時間軸記錄，看看是否有助於提升網頁成效。
以下動畫展示切換樣式及其對繪製時間的影響：
這個範例說明如何關閉其中一個 CSS 樣式 box-shadow 或 border-radius，大幅縮短繪製時間。在元素上同時使用 box-shadow 和 border-radius 會導致繪製作業耗用大量資源，因為 Chrome 無法進行最佳化調整。因此，如果您的元素會進行大量重繪 (如範例所示)，請避免這種組合。
附註
持續繪畫模式會重新繪製整個可見頁面。這通常是在瀏覽網頁時出現的情況。捲動通常只會繪製先前看不到的部分。如果是頁面的其他變更，系統只會重新繪製最小可能的區域。因此，建議您另找時間軸記錄 看看改善樣式後，網頁的繪製時間是否確實受到影響。
使用 continuous painting mode 時，您可能會發現 CSS 樣式 border-radius 和 box-shadow 會增加大量繪製時間。一般而言，我們不建議使用這些功能，因為這些功能超棒，我們終於滿意了。但瞭解這些軟體的使用時機和位置是至關重要的。請避免在大量重新繪製的區域使用，也請避免在一般情況下過度使用這些內容。
現場示範
點選下方，即可查看 Paul Ireland 使用連續繪畫功能識別出特別昂貴的顏料操作的示範影片。