以合成方式呈現網頁上的已繪製部分,可在畫面上顯示。
合成法是將頁面的彩繪部分放在一起, 而是顯示在畫面上
這個方面有兩項主要因素會影響網頁效能:需要管理的合成層圖層數量,以及用於動畫的屬性。
摘要
- 持續變更動畫的變形效果和不透明度。
- 使用
will-change
或translateZ
宣傳移動元素。 - 避免過度使用促銷活動規則。需要記憶體和管理
使用轉換和不透明度變更動畫
成效最佳的像素管道版本可避免版面配置和繪製作業,而且只需要進行合成變更:
![沒有版面配置或油漆的像素管線。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-pixel-pipeline-no-la-96825803c8cec.jpg?authuser=0000&hl=zh-tw)
為達成此目標,您必須持續變更可由合成器處理的屬性。今天只有兩個這個正確的屬性:transform
和 opacity
:
![可在不觸發版面配置或繪製的情況下產生動畫的屬性。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-properties-can-anima-100ed2c7d26a4.jpg?authuser=0000&hl=zh-tw)
使用 transform
和 opacity
的注意事項,是變更這些屬性的元素應位於其本身的合成器圖層。為了製作圖層,您必須升級 元素,我們接下來將介紹。
宣傳您要建立動畫的元素
如同我們在「簡化油漆複雜性及減少油漆區域」一節中所述區塊,您應該將打算加入動畫的元素 (無論原因為何,也不必過度!) 加入同一個圖層:
.moving-element {
will-change: transform;
}
如果是舊版瀏覽器或不支援的瀏覽器,版本會發生以下變化:
.moving-element {
transform: translateZ(0);
}
管理圖層並避免圖層爆炸
您可能會忍不住想,瞭解層通常有助於提升成效,因此能利用如下內容宣傳網頁上的所有元素:
* {
will-change: transform;
transform: translateZ(0);
}
若想宣傳網頁上的每一項元素,可以選擇這個方法。問題在於,您建立的每個圖層都需要記憶體和管理功能,而且這並非免費的。事實上,對於記憶體有限的裝置,效能影響遠大於建立圖層的好處。每個圖層的紋理都必須上傳至 GPU,因此在 CPU 和 GPU 之間的頻寬,以及 GPU 上可供紋理使用的記憶體方面,有進一步的限制。
使用 Chrome 開發人員工具瞭解應用程式的層
![Chrome 開發人員工具中的繪製分析器切換按鈕。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-toggle-the-paint-pro-0bfd1048bb7de.jpg?authuser=0000&hl=zh-tw)
如要瞭解應用程式層的層次,以及元素為何有圖層,您必須在 Chrome 開發人員工具中啟用 Paint 分析器」時間表:
啟用這項功能後,你即可開始錄影。錄影完成後,您可以在每秒影格數和詳細資料之間點選個別影格:
![開發人員想要剖析的影格。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/a-frame-developer-is-int-195784f471018.jpg?authuser=0000&hl=zh-tw)
按一下這個按鈕,即可在詳細資料中看到一個新選項:「圖層」分頁。
![Chrome 開發人員工具中的圖層分頁按鈕。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-tab-button-chr-b74ebc86acad5.jpg?authuser=0000&hl=zh-tw)
這個選項會開啟新的檢視畫面,您可以平移、掃描和放大該影格中的所有圖層,以及建立各圖層的原因。
![Chrome 開發人員工具中的圖層檢視。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-layer-view-chrome-de-04740f747ced7.jpg?authuser=0000&hl=zh-tw)
透過這個檢視畫面,您可以追蹤擁有的圖層數量。如果您在捲動或轉場等重要操作 (例如捲動或轉場) 時花很多時間撰寫程式碼 (建議大約 4 到 5 毫秒),可以參考這裡的資訊,查看圖層數量、建立層的原因,以及管理應用程式中的圖層數量。