ウェブレンダリングの最適化に関する研究を行っているとき、私は多くの一般的なウェブサイトで奇妙なレンダリング動作を経験しました。フレームレンダリング時間の大部分は、操作のない空のスペースです。 Example from Apple promo pageChrome DevToolsのフレームレンダリングでのアイドル時間
その時間枠で動作するのはGPUだけです。私はこの行動の原因を見つけることができませんでした。この問題の背景には何があり、どのようにプロジェクトのレンダリング時間を改善できますか？
これは、ブラウザーが何らかの処理をCPUまたはGPUで待機しているアイドル時間です。ドキュメントページHow to Use the Timeline Toolの円グラフのスクリーンショットに示されています。
私は公式ドキュメント内の任意の良い説明を見つけることができませんが、私はちょうど別の場所で何かが見つかりました：各縦棒の
透明領域は、一部の上に、少なくとも、アイドル時間をアイドルに対応しますあなたのページ。たとえば、最初のフレームが15msで実行され、次のフレームが30msかかるとします。一般的な状況は、フレームがリフレッシュレートに同期され、この場合、2番目のフレームが15msよりもわずかに長くレンダリングされたことです。ここで、フレーム3は「真の」ハードウェアフレームを見逃し、次のフレームでレンダリングされたので、第2フレームの長さは事実上2倍になった。
出典：Improving Web App Performance With the Chrome DevTools Timeline and Profiles
私は、これはSO私はGoogleのためにドキュメントを書き込み、誰を知っている誰かにスレッド渡します。彼らはこのトピックをよりよくカバーすることができるかもしれません。
