簡化繪畫複雜度並減少顏料區域

「繪製」是指填入像素並最終合成至使用者的螢幕。通常是管道中所有工作最長執行的時間,如要避免,進行一個避免。

Paul Lewis

「繪製」是指填入像素並最終合成至 使用者螢幕。這通常是 Pod 中執行時間最長的工作 第一種是避免發生問題

摘要

  • 如果除了轉換或不透明度以外,變更任何屬性一律會觸發繪製動作。
  • 「繪製」通常是像素管道中最昂貴的部分;盡量避免攻擊
  • 透過圖層宣傳與協調動畫,減少繪製區域。
  • 使用 Chrome 開發人員工具繪製分析器評估繪製複雜度和成本;盡可能減少

觸發版面配置和繪製

如果觸發版面配置,您就一律觸發繪製作業,因為變更任何元素的幾何圖形會導致其像素需要修正!

完整的像素管道。

此外,如果變更非幾何屬性 (例如背景、文字顏色或陰影),也可以觸發繪製功能。在這些情況下,就不需要使用版面配置,而管道會如下所示:

沒有版面配置的像素管道。

使用 Chrome 開發人員工具快速辨識油漆瓶頸

你可以使用 Chrome 開發人員工具,快速找出正在繪製的區域。開啟「算繪」分頁 ,然後啟用「Paint Flashing」

如果開啟這個選項,Chrome 會在進行繪製時閃爍綠幕。如果您發現整個螢幕閃爍綠光,或是您認為自己不應繪製的部分,就可以再深入探究。

發生畫作時,頁面會閃爍綠燈。

宣傳會移動或淡出的元素

記憶體中的單張圖像不一定都會繪製完成。事實上,瀏覽器也可以視需要為多張圖片 (或是合成圖層) 繪製。

合成器圖層的表示法。

這種方法的優點是,定期重新繪製的元素或透過轉換進行移動的元素可以處理,而不會影響其他元素。這與 Sketch、GIMP 或 Photoshop 等美術套件相同,在個別圖層上進行處理及合成,以形成最終的圖像。

建立新圖層的最佳方式是使用 will-change CSS 屬性。這項指令適用於 Chrome、Opera 和 Firefox,且其值為 transform,可用來建立新的合成器圖層:

.moving-element {
  will-change: transform;
}

如果瀏覽器不支援 will-change,但受益於建立圖層 (例如 Safari 和 Mobile Safari),您需 (濫用 3D 轉換) 強制新增圖層:

.moving-element {
  transform: translateZ(0);
}

請勿謹慎建立過多圖層,因為每個層都需要記憶體和管理功能。如要進一步瞭解相關資訊,請參閱「繼續使用合成器專用屬性及管理圖層數量」一節。

如果您已將元素升級為新圖層,請使用開發人員工具來確認這麼做是否有助於提升效能。請勿在未剖析的情況下宣傳元素。

減少繪製區域

不過,儘管強調了元素,有時仍需要繪畫。繪製問題最大的挑戰在於,瀏覽器會把兩個需要繪製的部分結合在一起,這可能會導致整個畫面重新繪製。舉例來說,如果頁面頂端有固定標題,而畫面底部繪製的內容,則可能使整個畫面重新繪製起來。

減少繪製區域的情況,通常是需要在協調動畫和轉場效果時,避免過度重疊,或設法避免網頁的特定部分產生動畫效果。

簡化繪製複雜度

部分螢幕填滿所需要的時間。

在繪畫方面,某些事物的代價比其他事物來得高。舉例來說,任何需要模糊處理的部分 (例如陰影) 繪製時,繪製時間會比繪製紅色方塊更久。然而,就 CSS 而言,這種情況未必容易看出:background: red;box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); 看似有大不相同的效能特性,但卻有明顯差異。

上方的繪圖分析器可讓你判斷是否需要透過其他方式來達到效果。然後問問自己,是否能夠用更便宜的樣式或其他方式,來獲得最終成果。

尤其是在動畫播放期間,您一定會想要避免繪製動畫的情況,因為每幅影格所需的 10 毫秒通常不足以完成繪製作業,在行動裝置上尤其如此。