請盡量使用合成器屬性並管理圖層計數

合成是將網頁上繪製的部分組合在一起,以便在畫面上顯示。

Paul Lewis

合成是將網頁上繪製的部分組合在一起,以便在畫面上顯示。

這個部分有兩個主要因素會影響網頁效能:需要管理的轉譯器圖層數量,以及用於動畫的屬性。

摘要

  • 持續變更動畫的變形效果和不透明度。
  • 使用 will-changetranslateZ 宣傳移動元素。
  • 避免過度使用宣傳規則,因為圖層需要記憶體和管理。

使用轉換和不透明度變更動畫

成效最佳的像素管道版本可避免版面配置和繪製作業,而且只需要進行合成變更:

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

為達到這項目標,您必須只變更可由合成器單獨處理的屬性。今天只有兩個這個正確的屬性:transformopacity

可在不觸發版面配置或繪製的情況下產生動畫的屬性。

使用 transformopacity 時,請注意,您變更這些屬性的元素應位於專屬的轉譯器圖層。如要製作圖層,您必須升級 元素,我們接下來會介紹。

提升要加入動畫的元素

如同我們在「簡化繪圖複雜度並減少繪圖區域」一節所述,您應將要製作動畫的元素 (在合理範圍內,請勿過度使用) 提升至各自的圖層:

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

或者,如果是舊版瀏覽器或不支援 will-change 的瀏覽器,請使用以下方法:

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

管理圖層並避免圖層爆炸

知道圖層通常有助於提升效能後,您可能會想要使用以下方式宣傳網頁上的所有元素:

* {
  will-change: transform;
  transform: translateZ(0);
}

這只是間接表示您想宣傳網頁上的每個元素。問題在於,您建立的每個圖層都需要記憶體和管理,而且這是完全免費的。事實上,在記憶體有限的裝置上,建立圖層所帶來的效能影響,可能遠大於任何好處。每個圖層的紋理都必須上傳至 GPU,因此 CPU 和 GPU 之間的頻寬,以及 GPU 上可用於紋理的記憶體,都會受到更多限制。

使用 Chrome 開發人員工具瞭解應用程式中的圖層

Chrome 開發人員工具中的繪圖剖析器切換鈕。

如要瞭解應用程式層的各層,以及元素為何有圖層,您必須在 Chrome 開發人員工具的時間軸中啟用 Paint 分析器:

開啟這項功能後,您應該會錄製到影片。錄影完成後,您可以在每秒影格數和詳細資料之間點選個別影格:

開發人員有興趣進行剖析的時間軸。

按一下 [圖層] 分頁,即可在詳細資料中看到一個新選項。

Chrome 開發人員工具中的「圖層」分頁按鈕。

這個選項會顯示新檢視畫面,讓您在該影格中拖曳、掃描及放大所有圖層,以及顯示建立每個圖層的原因。

Chrome 開發人員工具中的圖層檢視畫面。

您可以透過這個檢視畫面追蹤圖層數量。如果您在捲動或轉場等效能至關重要的動作中,花費大量時間進行合成 (應以 4 至 5 毫秒為目標),您可以使用這裡的資訊查看您有多少圖層、為何建立這些圖層,並據此管理應用程式中的圖層數量。