Google ChromeのDOMContentLoaded、Load、Finish

Web

僕はGoogle Chromeを使う時に検証ツールをよく利用しています。今回は、そんな検証ツールの中で、パフォーマンスを確認できる「Network」タブから、
・DOMContentLoaded
・Load
・Finish
の3つを再確認しようと思います。

Google Chromeの検証用ツール「Network」タブより

DOMContendLoaded

DOMツリーの構築が完了したまでの時間です。
つまり、最初のHTMLドキュメントの読み込みと解析が完了した時までの時間ということになります。

では、DOMツリーとはなにか?DOMツリーを知るためには、DOMを知っておかないと行けない。
よくあるボケだが、一応言っておくとジェットストリームアタックのやつとは違う。

DOMとは「Document Object Model」の略。
HTMLドキュメントやXMLドキュメント(見出し、段落、領域、画像、リンクなど)をプログラムから利用するためのAPI。
要するに、プログラムからHTMLやXMLを自由に操作するための仕組のことを言います。

Webブラウザなどに実装されているもので、ページ上にJavaScriptなどで記述されたスクリプトからページ内の各要素を読み取ったり、内容や設定の変更、要素の追加や削除などを行う標準的な手段として用いられているものです。

このDOMというのは、ツリー構造で扱われるようでそれがDOMツリーです。  

Load

DOMツリー + 画像やスクリプトといった必要リソースのすべての読み込み完了までの時間です。
このLoadは実際に画像系スクリプト系の読み込みが絡んでくるので重要な要素。

Finish

ページが表示されるまでの時間です。
最終的なWebサイトの表示時間ということになりますが、例えば表示の順番を意図的に変えていたり優先度の低い部分は読み込みの遅延処理を行ったりという対策をとっていた場合、このFinishがその分伸びてしまうのでここが短くなるという意味がどれだけあるのだろうかとは思っています。

ご参考に!!

タイトルとURLをコピーしました