2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptの読み込まれる・実行されるタイミング

Posted at

#リクエスト→レスポンス→レンダリングまで

[ブラウザのネットワークレイヤー]
①ブラウザがサーバーにリクエスト(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のレンダリングが一時停止せずに、ユーザーに少しずつ画面を表示(線画)できる

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?