是什麼原因導致的Chrome時間軸幀有這麼多的空白空格

Question

有時，當我檢查元素在谷歌瀏覽器，我覺得我有一些大的框架，但他們都充滿了空白。任何人都知道經常造成如此大量的空餘空間？我見過計時器會延長幀的長度，但在下面的例子中，我不確定爲什麼一幀會如此之大。

很想一些幫助減少這些

Answer 1

這是記錄here，請參見「關於明確或淺灰色的框」部分。 'Clear frame'在這裏被描述爲

顯示刷新週期之間的空閒時間。

根據this video，清除條表示瀏覽器正在等待CPU或GPU。在「標準」網站上工作時，開發人員無法解決此問題。

Answer 2

我發現了一些有趣的關係，我希望它會節省時間的人（我花了很多時間搞清楚這一切之前）

1. 最重要的是 - 鉻devtools花費很多。一個意思是很多，即使它沒有提到它。例如：
2. 「屏幕截圖」在性能監視器提高了幀時間從16毫秒到我的情況66ms，只是在時間線上空的空間填充它 - without screenshots和with screenshots。 （現在我看到長操作上與GPU的截圖，但沒有任何信息，關於什麼確實做到了特定操作）
3. 東西像「油漆閃爍」或「FPS計」「渲染」工具，極大地提高噴漆作業時間。 只要確保在分析性能之前禁用了所有這些功能！
4. 很奇怪的事情發生了「其他」部分（時間軸上的灰色）。它假設是devtools本身的成本，但有時它可以隨機地在零點附近進行大量計算，或者100％閒置。我的建議 - 在新的Chrome版本中有新的「性能監視器」工具（不是簡單的「性能」）。最好打開它並關注「CPU使用率」時間表。如果您發現意外的灰色曲線行爲，只需重新加載頁面或整個Chrome瀏覽器 - 它可爲您節省大量時間。
5. 某些擴展可能會導致時間表隨機效應。最好禁用它。
6. 其實在工具或擴展任何東西可以毀了你的測量。切換全部關閉，然後開始在您的代碼，dom或樣式中搜索問題