恥ずかしながら$(document).ready()やwindow.onload、document.addEventListener('DOMContentLoaded')などそれぞれの実行タイミングの違いを正確に理解できていなかったのですが、調べていくうちにNavigation Timingを理解しておいたほうが後々捗りそうだと思い至り、Navigation Timing周辺の情報と合わせ調べた内容を記事にしてみました。

このページの目的

Navigation Timingを念頭に置いた上でJavascriptの実行タイミングを把握できるようになること

Navigation Timingとは

Navigation Timingとはブラウザがウェブサイトを表示するまでの間の一連のプロセスとタイミングを細かく定義したもので、Unload,Redirect,Fetch,DNSLookup,TCPConnect,Request,Response,Processing,Loadという処理プロセスとなっており、それぞれの境目にもStart及びEndというタイミングがあります。
この実装がNavigation Timing APIで、Navigation Timing APIとはこれらのタイミング毎に到達した時間を、それぞれUnixTimestampで取得できるというものです。

図でイメージをつかむ

W3Cより引用、Navigation Timingの全体像です。
このうち、Javascriptの実行においては特にProcessing,Loadのブロックに注目します。

続いてGoogleより引用、ProcessingとLoadの詳細が描かれています。

Javascript観点では、

DomLoading (非推奨)
DomInteractive
DomContentLoaded
DomComplete
Load

といった5つのタイミングとその流れを理解できればOKです。

ブラウザが画面を構築するまでの流れ

Navigation Timingとは別に、ブラウザが画面を構築するまでの基本的な流れをおさえておくと理解が早まる気がしたので、ここで簡単に補足します。

Googleより引用。

Request送信後ResponseとしてHTMLドキュメントを取得したら、Parseが始まりDOM構築が開始されます。Parseする中でCSSリソースやJSリソースを発見し次第それらのParseも順次開始されます。そしてCSSOMが構築されたあとにJSの実行が始まります。

この場合、Render processのRequest pageまでに該当するのがNavigation TimingにおけるUnloadからTCPまで、各GETがNavigation TimingにおけるRequest、responseはResponseを指し、1つ目のBuild DOMに当たるタイミングはDomLoadingおよびDomInteractiveと考えればよいでしょう。また、2つ目のBuild DOMと最後のRender Pageの境目がDomCompleteに該当するかと思います。

`Processing`,`Load`とブラウザの挙動の関係

以上を踏まえブラウザがWeb画面を表示するにあたっての処理の流れはおよそ以下のようになると思います。

Navigation Timing	Browser
DomInteractive	HTMLドキュメントのParseを開始
DomContentLoadedEventStart	DomContentLoaded開始の合図
DomContentLoaded	HTMLドキュメントのParseが完了、CSS,画像等のサブリソースの読み込みやParseを開始
DomContentLoadedEventEnd	DomContentLoaded終了の合図
DomComplete	DOMとCSSOMが組み合わさり画面構築が完了、画像などの読み込みも完了している状態
LoadEventStart	Loadタイミング開始の合図
Load	Loadタイミングでの処理があれば実行
LoadEventEnd	Loadタイミング終了の合図

実行タイミングやreadyStateと照らし合わせる

前置きが長すぎました…では実行タイミングはどう捉えておけばいいのかというのを、記法別に、またdocument.readyStateの戻り値も合わせて並べてみます。

How to Call	Navigation Timing	readyState
`<head>`内で`<script src="app.js"></script>`	DomInteractive	loading
`<head>`内で`<script async src="app.js"></script>`	DomContentLoaded	interactive
`</body>`手前で`<script src="app.js"></script>`	DomInteractive	loading
`</body>`手前で`<script async src="app.js"></script>`	DomContentLoaded	interactive
`document.addEventListener("DOMContentLoaded")`	DomContentLoaded	interactive
jQueryを使って`$(document).ready`	Load	complete
`<body>`内でダイナミックロードする `var script = document.createElement('script');script.src = 'app.js';document.body.appendChild(script);`	DomContentLoaded	interactive
`window.onload`	Load	complete

手元の環境で動作を確認した限りではあるので多少間違い、勘違いはあるかもしれませんが、大まかな流れはイメージできるかなと思います。

おわりに

はじめは興味本位で調べ始めた程度だったのですがもしかしたら他の人にとっても有用かもしれないと思い、簡単にですが記事に起こしてみました。もし間違い等がある場合には指摘いただけると有難いです。