1. このページの目的
DevTools の Performance パネルを使って、Webページ読み込み時の Chrome の動作を観察する。
ブラウザ：Chrome 89
2. テスト用の要素
画像を表示する
JavaScriptにより、文字列を表示する
strJs:
strJsDefer:
strJsAsync:(ここに文字列がセットされる保証はないはず→)
3. メモ
基本的なこと
- HTMLの記述を上から実行していく。
- CSSOM に必要なリソースを考える。そのリソースさえダウンロードできれば、CSSOM は構築される。
- async もしくは defer をつけると、優先度は Low になる。
- JSファイルは defer を付けておけば、HTMLパース処理と並行してファイルをダウンロードしてくれ、DOMContentLoaded の前に実行してくれる。小さなJSファイルであれば、さくっと終わる。
この場合、Layout の実行をブロックしないようだ。 - すぐにいらないJSファイルなら defer/async を付けて優先度を低くし、すぐに必要なCSSファイルには preload を使って優先度を上げれば、FP,FCP などの指標及び、Layout,Paint フェイズがより早くなり望ましい。
- Experience という行(?)に Layout Shift の赤いBOXが表示されるが、やたら幅広く表示されても CLS の値としてはかなり小さかったりするので注意。
DOMContentLoaded, Load イベント関連
- defer,asyncなしのJavaScript, または defer の JavaScript の実行が終わるまで、
DOMContentLoadedはブロックされる。- つまり、async をつけた JSファイルは、
DOMContentLoadedをブロックしない（defer だとブロックする）。 DOMContentLoadedより後ろで JSファイルがダウンロードされていたら、それは async が指定されているはず。- jQueryなどは async で読み込みたい。
- しかし async をつけた JSファイルであっても、
Loadはブロックするようだ（async をつけたJSファイルを実行し終わるまでLoadイベントは発火されない）。 - ただ、FP, FCP, LCP は
Loadより前にもなるので、問題になることもないかもしれない。
- つまり、async をつけた JSファイルは、
preloadを付けると、早めにダウンロードが始まる。なので、CSS には付けたほうが良い。DOMContentLoadedが速くなる。- 画像ファイルがダウンロードされるまで、
Loadはブロックされる。 - Timing のところに、縦線とともに DCLや L が表示されるが、そのイベントハンドラを実行しているBOX(?) はその前にある。
- FP, FCP, LCP は
Loadより前にくることもある。
Layout, Paint 関連
- JavaScript にHTML要素を操作する処理が入っていると、Layout の実行開始がブロックされる？(onload あたりで実行される)
- 優先度の高いCSSが読み込まれてしまえば、Layout, Paint が始まることもある。
- Layout が始まるタイミングがよく分からない。
DOMContentLoadedより前の場合もあるし、DOMContentLoadedとLoadの間の場合もあるし、Loadの後のこともある。 - High な CSS は読み込んだけど、High な JS のダウンロード&パース&実行 に時間が掛かりそうなときは、先に Layout 処理が実行されているように見える。
- High なJSも実行まで速く終わればすぐに Layout が実行されるし、
DOMContentLoadedもすぐに発火するように見える。 - Layout, Paint が早く発生すれば、FP, FCP, LCP なども早く発生するはず。
スクリーンショット
DOMContentLoaded と Load イベントハンドラの処理を表す部分