Chromeタイムラインフレームの空白が非常に大きくなる原因

Question

Google Chromeで要素を検査すると、大きなフレームがいくつかあるが、空白で埋められていることがあります。誰もが頻繁にこのような大量の空きスペースを引き起こすことを知っていますか？私はタイマーがフレームの長さを伸ばすことに問題を引き起こすのを見ましたが、以下の例では、なぜフレームが非常に大きくなるのか不明です。

は、これはhereを文書化されているこれらの

Answer 1

を最小限に抑えるいくつかの助けを愛する「について明確またはライトグレーのフレーム」のセクションを参照してくださいだろう。問題の「クリアフレーム」は、

と表示リフレッシュサイクル間のアイドル時間として記述されています。

this videoによれば、クリアバーはCPUまたはGPUを待っているブラウザを示します。開発者が「標準」ウェブサイトで作業しているときにこれを修正することは何もできません。

Answer 2

私はいくつかの興味深い関係を発見し、私はそれが誰かのために時間を節約することを願っています（私はフィギュア出て、このすべてを前に、多くの時間を費やし）

1. 最も重要なこと - クロムデベロッパーツールには多くの費用。たとえそれについて何も言わないとしても、A LOTを意味します。例：
2. パフォーマンスモニターの「スクリーンショット」は、私の場合、フレーム時間を16msから66msに増やし、タイムラインの空きスペース（without screenshotsおよびwith screenshots）で満たします。 （今、私はスクリーンショットでGPUの長時間の操作を見ていますが、特定の操作が何をしたかについての情報はありません）
3. 「ペイント点滅」や「fpsメーター」などのレンダリングツールでは、 パフォーマンスを分析する前に、このすべてを無効にしてください。
4. 「他の」セグメント（タイムラインのグレー色）で非常に奇妙なことが起こります。それはdevtools自体であると考えられますが、多くの計算では無作為にゼロになることがあります。私のアドバイス - 新しいクロムバージョン（単純な「パフォーマンス」ではなく）に新しい「パフォーマンスモニタ」ツールがあります。これを切り替えて、「CPU使用率」のタイムラインを見守るほうがよいでしょう。グレーカーブの予期しない動作が見られる場合は、ページ全体またはクロム全体をリロードするだけで、時間が大幅に節約されます。
5. 拡張子によっては、タイムラインにランダムな影響が生じることがあります。それも無効にすることをお勧めします。
6. 実際には、ツールや拡張機能の中には測定が壊れることがあります。コード、ドミノ、またはスタイルの問題を検索する前にすべてをオフに切り替えてください。