Chrome DevTools框架事件時機

我使用Chrome在應用程序的動畫中隔離瓶頸。Chrome DevTools框架事件時機

這表明幀正在花費大約20 + ms，這太慢了。但是當我展開框架以查看發生了什麼時，它向我展示了一個採用20 + ms的jQuery調用，但實際的Recalculate Style事件僅需要5ms以上。

如何找出導致延遲的原因？我看不到其他的15ms的是什麼

總事件時間：

Chrome DevTools showing total time of jQuery function call

jQuery函數中的「重新計算樣式」事件

Chrome DevTools showing split of timing for Recalculate Style event

棧之前「重新計算風格「

Chrome DevTools showing stack for Recalculate Style event

應該在Recalculate Style事件之後列出構成總共22.93ms的其他嵌套事件。例如，下面您可以看到有一個函數調用需要總共9ms。紫色數字顯示渲染時間，黃色數字顯示腳本時間。

Parent event

如果您關閉彈出窗口，你可以看到每一個它構成了事件調用它下面的詳細介紹。

nested events

2013-12-10 20:01:53

對不起，我以爲我評論過你的答案。我添加了一個屏幕快照來顯示擴展的事件，並且函數調用側顯示的唯一一件事是重新計算的事件 –

您是否指第一個屏幕截圖？如果是這種情況，那麼就沒有更多的細節可以了。有問題的代碼是在第5行的jquery-2.0.3-min.js。但是，由於它是一個縮小版本，不會很有幫助。您可以在開發過程中切換到未壓縮版本以便於調試。 –

啊，這是一個很好的觀點。也許這會有所幫助。那麼jQuery函數調用自己可能會花費那麼長時間嗎？我將使用未壓縮的版本來查看該功能是什麼 –

回答