リクエスト→レスポンス→レンダリングまで
[ブラウザのネットワークレイヤー]
①ブラウザがサーバーにリクエスト(HTMLとCSSとJSをおくれ)
②サーバーがHTMLファイルを生成(作るから待って)
③レスポンスが返ってくる(HTMLとCSSとJSファイルをダウンロード)
[レンダリングエンジン]
④最初にhtmlを読み込むと、windowオブジェクトが生成される(widowオブジェクトは各ページごとにあるお)
⑤windowオブジェクトのプロパティとしてDocumentオブジェクトがある。DocumentオブジェクトがhtmlをパースしてDOMツリーを作っていこうとする
読み込み状況を示す文字列を返すreadyStateプロパティがあり、この時の文字列はloading
⑥パースはhtmlの上から順に行われていく。div, h1, ul, liなどの各要素はNodeと呼ばれる。レンダリングエンジンはNodeをDOMツリーに追加していく(documentオブジェクトが根Node)
⑦この時、script要素があるとそのコードをパースし、エラーがなければ同期的に実行する。つまり、JavaScriptの実行が終わるまで、htmlのパースが一時停止される。ここのJSの実行はJavaScriptエンジンで行われる。
⑧htmlが全てパースされ、DOMツリーが完成すると、readyStateプロパティはinteractiveになる
⑨ブラウザはDocumentオブジェクトに対して、DOMツリーの構築完了を告げるDOMContentLoadedイベントを発生させる
⑩imgなどの外部ソースを読み込み、すべての読み込みが完了した時点でdocument.readyStateプロパティはcomplateになる
最後にブラウザは、Windowオブジェクトに対してloadイベントを発生させる
[JavaScriptエンジン]
JavaScriptの実行は同期的に行われると言ったが、非同期に行う方法も存在する。
①ASYNC、DEFERこの辺りがよく使われるんじゃないか
非同期に実行するため、HTMLのレンダリングが一時停止せずに、ユーザーに少しずつ画面を表示(線画)できる