chrome devtools時間線中的長幀調試

Question

我在 chrome devtools 中調試我的 javascript 性能時遇到問題。 我正在做一些繁重的動畫，並且在我的時間軸中遇到了一些我不理解的東西（在運行一些動畫時）。

我用紅色圓圈標記了點擊事件。 上面寫着綠色“動畫”的藍色方塊是動畫（多么令人驚訝）。 紅色方塊是我遇到問題的地方。

它需要 300-400 毫秒，並且在動畫結束后發生。 調用堆棧幾乎是空的，我不是開發工具專家。 有什么明顯的事情發生，我沒有看到？

此外，如果我再等一會兒，動畫就會運行得更流暢，那些紅色的長幀就會消失。

在項目中，我使用 Backbone、下划線、jQuery 和 TweenMax 制作動畫。

Answer 1

從您的時間軸面板的外觀來看，我猜您使用的是舊版 Chrome。 請更新到 v57。 在以前的版本中存在一個錯誤，動畫之間的預期延遲被標記為紅色（長幀）。 請參閱此報告。

鉻 52：

鉻 57：