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

「繪製」是指填滿像素的過程,最終將這些像素合成至使用者的螢幕上。通常是管道中所有工作執行時間最長的任務,還有一個可以盡可能避免的工作。

Paul Lewis

「繪製」是指填滿像素的程序,最終合成使用者螢幕畫面。通常是管道中所有工作執行時間最長的任務,如有可能,就會避免。

摘要

  • 變更屬性或不透明度一律會觸發繪製作業。
  • 塗料通常是像素管道中最昂貴的部分,請盡量避免使用。
  • 透過圖層宣傳及協調動畫減少繪製區域。
  • 使用 Chrome 開發人員工具繪圖分析器評估油漆作業的複雜度和成本,並減少需要處理的部分。

觸發版面配置和繪製

若觸發版面配置,您一律都會觸發繪製,因為變更任何元素的幾何圖形,表示需要修正像素!

完整的像素管線。

此外,變更背景、文字顏色或陰影等非幾何屬性也會觸發繪製作業。在這些情況下,您不需要進行版面配置,而管道看起來會像這樣:

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

使用 Chrome 開發人員工具快速找出油漆瓶頸

你可以使用 Chrome 開發人員工具,快速找出正在繪製的區域。開啟「Rendering」分頁,然後啟用「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 毫秒通常不夠長,無法完成繪製作業,特別是在行動裝置上。