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

Paul Lewis

「繪製」是指填入像素並最終合成至 使用者的螢幕畫面這通常是管道中執行時間最長的任務,因此盡可能避免使用。

摘要

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

版面配置和繪製方式的觸發方式

如果觸發版面配置,您會一律觸發繪圖,因為變更任何元素的幾何圖形意味著其像素需要修正!

完整的像素管道。

變更非幾何屬性 (例如背景、文字顏色或陰影) 時,也會觸發繪圖作業。在這種情況下,您不需要版面配置,管道會如下所示:

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

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

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

啟用這個選項後,每當 Chrome 進行繪製時,就會閃爍綠幕。如果您發現整個螢幕閃爍綠光,或是您認為不應該繪製的區域,應該再進一步研究。

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

宣傳會移動或淡出的元素

繪圖不一定會在記憶體中繪製成單一圖片。事實上,瀏覽器可以視需要將圖片繪製到多張圖片或合成器圖層。

合成器圖層的表示法。

這種做法的好處是,您可以處理經常重新繪製的元素,或在畫面上以轉換方式移動的元素,而不會影響其他元素。這與 Sketch、GIMP 或 Photoshop 等繪圖套件相同,在這些套件中,您可以處理個別圖層,並將圖層重疊合成最終圖片。

建立新圖層的最佳方法是使用 will-change CSS 屬性,這項屬性可在所有主要的新型瀏覽器引擎中使用。使用 transform 的值時,will-change 會建立新的合成器圖層:

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

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

如果您已將元素升級至新圖層,請使用 DevTools 確認這項操作是否帶來效能優勢。請勿在未剖析的情況下宣傳元素。

減少繪製區域

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

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

簡化繪圖複雜度

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

在繪畫方面,有些東西比其他東西貴。舉例來說,任何涉及模糊處理的效果 (例如陰影) 都會比繪製紅色方塊需要更長的時間。不過,在 CSS 方面,這並非一目瞭然:background: red;box-shadow: 0, 4px, 4px, rgba(0,0,0,0.5); 的效能特性看起來不一定有太大差異,但實際上確實如此。

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

您應盡量避免在動畫期間進行繪圖,因為每個影格有 10 毫秒的時間通常不足以完成繪圖作業,尤其是在行動裝置上。