所謂合成元素,是指將頁面繪製的部分放在一起,以便顯示在螢幕上。
轉譯是指將頁面的繪製部分組合在一起,以便顯示在螢幕上。
這個領域有兩項主要因素會影響網頁效能,分別是需要管理的合成器圖層數量,以及用於動畫的屬性。
摘要
- 請繼續調整動畫的不透明度和不透明度變更。
- 使用
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=3&hl=zh-tw)
為實現這個目標,您必須持續變更可單獨由合成器處理的屬性。今天只有 transform
s 和 opacity
這兩個屬性為 true:
![能夠以動畫呈現屬性,而不會觸發版面配置或繪製的屬性。](https://web.developers.google.cn/static/articles/stick-to-compositor-only-properties-and-manage-layer-count/image/the-properties-can-anima-100ed2c7d26a4.jpg?authuser=3&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=3&hl=zh-tw)
如要瞭解應用程式中的圖層以及為何元素具有圖層,您必須在 Chrome 開發人員工具的時間軸中啟用「繪製分析器」:
啟用這項設定後,您應該就能開始錄影。錄製完成後,您可點選個別影格,您可以在每秒影格數與詳細資料之間找到個別影格:
![開發人員想剖析的頁框。](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=3&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=3&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=3&hl=zh-tw)
在這個檢視畫面中,您可以追蹤圖層數量。如果您在捲動或轉換等重大效能操作時,花費很長時間進行建構 (建議您設定約 4 到 5 毫秒),可以參考這裡的資訊,瞭解各層的數量、建立原因,以及如何管理應用程式中的圖層計數。