Chrome DevTools時間軸：框架視圖出現與記錄圖表不一致

Question

我想了解Chrome DevTools Timeline選項卡。

我都記錄在我的網頁一些活動 - 這裏是輸出截圖：在頂部「豎線圖」

通知我選擇了一個欄的時間框架，這與一幀相關。酒吧幾乎完全是綠色的（意味着大部分時間都花在「繪畫」上）。
中間的圖表顯示了很多黃色，如果我擴大底部寬黃條旁邊的小箭頭，我可以看到它也包含一些紫色。

中間圖形底部有一個寬的「空綠色欄」，它似乎在底部餅圖中被忽略。我猜這與它是一個單獨的線程有關。底部餅圖僅考慮主線程是真的嗎？

如果是這樣，那麼底部2圖 - 水平條和餅圖 - 看起來是一致的。
我不明白的是爲什麼頂部圖顯示幾乎所有「綠色」，這似乎與其他圖不一致。
我在這裏錯過了什麼？

Answer 1

空綠色的酒吧，你看，可能意味着幾件事情：

1. 正如你所說，爲Javascript渲染主線程忙於處理別的事情。

2. 當時GPU非常繁忙，並且無法跟上 - 通常可能由各種CSS過濾器或其他視覺效果導致頁面使用。

嘗試啓用時間線內的「CPU活動」功能。

至於餅圖中出現的空白綠條，我不確定它是否應該在那裏。