合成是指組合網頁上的繪製部分，以用於在螢幕上顯示。
TL;DR
- 針對您的動畫，堅守變形和透明度變更。
- 以 will-change 或 translateZ 將移動元素升階。
- 避免過度使用升階規則；圖層需要記憶體和管理。
此領域存在影響網頁效能的兩項關鍵因素: 需要加以管理的合成器層數目，以及您針對動畫使用的屬性。
針對動畫使用變形和透明度變更
表現最佳的像素管道版本會避免版面配置和繪製，並只需要合成變更:
為實現此目標，您需要堅守只需合成器即可處理的變更屬性。 時下只有兩個屬性才是真的: 變形 和 透明度:
使用變形和透明度需要注意的是，您變更這些屬性的所在元素應該要在 它本身的合成器層上。 要製作合成器層，您必須將元素升階，這部分我們將在稍後討論。
將您計畫動畫處理的元素升階
正如我們在「簡化繪製複雜性和減少繪製區域」一節中提到，您應升階您計畫動畫處理的元素 (要合理，不要過火！) 至它們本身的層:
.moving-element {
will-change: transform;
}
或針對較舊的瀏覽器，或不支援 will-change 的瀏覽器:
.moving-element {
transform: translateZ(0);
}
這會向瀏覽器提供即將送入變更的預警，並且視您計畫變更的對象而定，瀏覽器可以進行佈建預備 ，例如建立合成器層。
管理層，並避免層爆炸
知道層經常有助於效能之後，用以下設計將您網頁上所有元素升階的想法，或許相當誘人:
* {
will-change: transform;
transform: translateZ(0);
}
這是「您會想將網頁上每一元素都升階」的婉轉說法。 此處的問題在於您建立的每一層都需要記憶體與管理，這可不是免費的。 事實上，在記憶體有限的裝置上，其對效能的影響可能遠大於建立層的任何好處。 每一層的紋理必須上載至 GPU，所以 CPU 和 GPU 的頻寬及 GPU 紋理的可用記憶體，都存在著進一步的限制。
使用 Chrome DevTools，以瞭解您應用程式中的層
要瞭解您應用程式中的層，以及元素具有一個層的原因，您必須在 Chrome DevTools 的 Timeline 中，啟用繪製分析工具:
開啟繪製分析工具後，您應進行一段錄製。 錄製完畢後，您將能夠點擊個別畫面 -- 這可以在每秒畫面列和詳細資料之間找到:
按一下這個，即可在詳細資料中提供您一個新選項: 層標籤。
此選項將叫出一個新檢視，讓您可針對該畫面中的所有層進行平移、掃描和放大，並提供每一層建立的原因。
使用此檢視，您可以追蹤您擁有的層數目。 如果您在例如捲動或轉換等效能關鍵行為期間，花了很多時間在合成上 (以約 4-5ms 為目標)，您可以使用此處的資訊來查看您有多少層、其建立的原因，並從那裡管理您應用程式中的層數目。