在鉻開發工具中的圖層組成

Question

我有簡單的過渡動畫div元素。爲了防止不必要的繪畫事件我申請了更高的z-index和0轉換，所以這div很可能是它自己的層。但是瀑布圖顯示了每個動畫刻度之後可能發生的層組合事件。我想知道，這是GPU頁面呈現之前的一些最終圖層組成，並且在每次頁面更改之前都是不可避免的，或者我只是在做錯誤的事情？

Answer 1

時間軸中的合成事件總是在更新動畫幀時發出，而您之前的假設是正確的。爲了驗證您的動畫div是否真的成爲圖層，請查找Paint事件 - 這些是每個圖層，並且如果一個圖層相對於另一個圖層進行了過渡，則在動畫期間不應該有任何繪畫事件，所提供的圖層內容不會更改。還要注意，在最新版本的Chrome（m30 +）中，時間線顯示與Paint in事件彈出窗口相關聯的圖層的根。

另一種檢查動畫元素是否被升級爲圖層的方法是實驗圖層面板（在about：flags中啓用DevTools實驗，重啓Chrome，然後在DevTools設置的Experiments選項卡中啓用Layers面板）。