Dev Tools中的慢速光柵化

Question

我正在通過一些相當簡單的視差滾動來優化網站。 動畫元素位於不同的圖層上（ backface-visibility:hidden ），腳本和渲染步驟看起來相當快。 但是我看到很多時間花在繪畫上：

實際繪圖很好，但那些巨大的空心綠條表示單獨的合成器線程中的光柵化。

這是鏈接

我該怎么做才能做到這一點，我該如何改進呢？

Answer 1

好的，我可以重復空心棒。

它們發生在合成器線程上，這就是為什么我們將它們空洞化。 你可以更清楚地看到火焰圖：

然后，如果您使用“ 繪制”復選框選中時間線，則可以確切地看到每個繪制內部的內容。

然后我們可以使用滑塊縮小哪些繪制調用是這些大型塗料中最昂貴的部分：

（看起來像一個大的剪輯，然后位圖繪制）

但總體而言......似乎你在每一幀都重新塑造了世界。

您可能希望了解每個框架中發生的情況...尤其是對您的圖層：

然而。

畢竟，看起來你可以通過動畫transform:translate()來解決你的問題transform:translate()而不是left / top 。 我還建議添加will-change:transform到那些項目。 這將允許瀏覽器在不重新繪制的情況下移動項目，您不必在每個幀上進行重新設置。

必讀：

• 動畫和表演 - 網絡基礎
• 高性能動畫 - html5rocks

干杯