Dev Tools中的緩慢光柵化

我正在使用一些相當簡單的視差滾動優化網站。動畫元素位於單獨的圖層上（backface-visibility:hidden），腳本和渲染步驟看起來相當快。但是我看到了很多的時間花在繪畫：Dev Tools中的緩慢光柵化

Chrome Dev Tools screen grab

實際繪圖是不錯，但那些巨大hollow green bars代表了不同的合成線程光柵化。

我在做什麼造成這一點，我怎麼能提高呢？

2015-02-24 Tamlyn

你可以分享你的頁面，或至少它的一部分？ – Kiril 2015-02-24 16:59:30

@Kiril我已經添加了一個鏈接到開發網站。感謝您的期待。 – Tamlyn 2015-02-25 13:19:32

好的，我可以再現空心酒吧。

enter image description here

它們都發生在合成線程上，這就是爲什麼我們做這些空洞。你可以看得更清楚輕彈火焰圖表：

enter image description here

然後，如果你記錄的時間軸塗料選中複選框，你可以看到什麼是每個內線。

enter image description here

，然後我們可以使用滑塊來縮小其繪製調用是這些大塗料中最昂貴的部分：

enter image description here

（看起來像一個大cliprect，然後位圖繪製）

但是看起來總的來說......看起來你正在每一幀重繪世界。

你可能想看看發生了什麼事在每幀中......尤其是你的圖層：

enter image description here

但是。

畢竟，看起來你可以通過動畫transform:translate()而不是left/top來解決你的問題。我也建議將will-change:transform添加到這些項目。這將允許瀏覽器移動項目而不重繪，並且不應該在每個框架上重新渲染。

必曰：

乾杯

2015-03-10 05:51:03

回答