如何正確理解devtools時間軸？

Question

我的問題是關於Chrome DevTools，具體來說我有關於時間軸選項卡的問題。 因此，正如我讀過無數次，我的瀏覽器必須有60fps的速度渲染我的像素。有時雖然它有一些重JS執行和防止60fps發生。另外，如果我有一些CSS和JS導致重新計算和重新繪製DOM樹（部分樹或全部樹），那麼對於一幀，它可能也會花費大於16ms的時間。這裏是這樣長的幀從我們的應用程序的圖片：

好吧，我在這裏可以清楚地看到，這兩個請求花費如此多的時間（192ms + 14ms）但是，該瀏覽器不能60fps的油漆它並沒有在那裏靠得很近。

雖然這裏是另一張照片：

所以這是現在好多了。 現在它是〜42fps。但現在我不明白爲什麼..

我有幾個「更新層樹」和「油漆」的場合。一些鼠標事件，但所有這些都是< = 1ms。

在這個框架中有12個這樣的「事件」。其中10個甚至小於0.30ms，所以如果我總結它們，肯定會小於16ms（如果我的計數正確的話，3.57），但Chrome說這個幀是23.9ms。

爲什麼時間線說我在這裏有垃圾？我該怎麼做才能擺脫它，以及如何知道瓶頸在哪裏？

我在這裏有點困惑，因爲我絕對錯過了檢查時間軸的東西。所以請給我一些詳細的解釋或一些關於如何擺脫這種「垃圾」和如何檢測它們的詳細教程。雖然我已經讀過幾篇文章，幾乎完成了性能Udemy當然，我仍然感到困惑..

謝謝

Answer 1

我懷疑是有「原生」的代碼在開放空間中執行的時間表不報告。

您可能想要嘗試使用開發工具中的「配置文件」選項卡來取代CPU配置文件。這將顯示一個「（Program）」欄，它是正在執行的本機Chrome代碼。這可能至少是開始弄清楚發生了什麼。

時間軸顯示在右邊白色的差距：

探查表明，（方案）和垃圾收集 「（G ... R）」 碰巧有

如果在那裏有一大塊「（程序）」，那麼我認爲你可以使用chrome：// tracing選項卡來顯示所有本地/內部的東西：