Chrome DevTools：緩慢的框架，但沒有導致它們的事件

Question

當您在Chrome開發工具的時間軸中有緩慢的框架（那些用紅色三角形表示的框架）時，這意味着什麼，但它不顯示是什麼原因導致的（腳本，渲染，構圖等）。這就像沒有真正發生，但你仍然有janks。

Answer 1

如果你點擊的時間跨度爲主線的上方，然後單擊底部自下而上選項卡上，你可以看到所有的個體活動正在進行加起來到總時間。我懷疑還有其他一些你目前無法看到的活動，但是如果你垂直滾動，你應該看到它們 - 可能是另一名工人的Rasterize Paint。

更新 我意識到，在仰視圖的時間加起來不爲框架中的總時間。我做了更多的比賽，看起來好像剩下的時間是'空閒'時間。

如果您看下面的屏幕截圖，我已調整時間軸視圖以包含大約一個具有最小活動的幀。因爲你可以看到任何一邊的虛線稍微進一步。

如果你然後看下面的Summary視圖，你可以看到大多數時間被列爲'Idle 」。如果你假裝我更準確地將時間軸視圖過濾爲一幀（通過從彙總值中取出一小段時間），你可能會相當自信地得出結論：總幀時間（顯示在Main螺紋杆）是摘要中顯示的值的總和，包括'空閒'時間。