skip to content
Logo
Yurikago Blog

ブラウザのレンダリングの過程でJavaScriptが実行されるタイミング

/ 1 min read

View more blogs with the tag javascript
Table of Contents

技術評論社Webフロントエンドハイパフォーマンスチューニング 第2章「ブラウザのレンダリングの仕組み」を読んでいて気になることがありました。

サーバーからドキュメントを受け取り、レンダリングする過程で

  1. JavaScriptが実行されるタイミングはいつなのか
  2. サブリソース（cssやimageなど）のリクエストをサーバーに送るタイミングはいつなのか
    • DOMツリーの構築前or構築中など

この記事では1について確認したことをまとめました。

参考: https://gihyo.jp/book/2017/978-4-7741-8967-3

検証環境

Google Chrome 79.0

ディレクトリ構造

/
  index.html
  1.js
  2.js
index.html
<html>
  <head>
    <script src="./1.js"></script>
  </head>
  <body>
    <script src="./2.js"></script>
  </body>
</html>
1.js
window.addEventListener('DOMContentLoaded', (event) => {
  console.log('1.js')
})
2.js
console.log('2.js')

結果

2.js
1.js

まとめ

HTMLの上から下にかけてスクリプトが実行されていました。DOMContentLoadedイベントが発火する前に body タグ内のスクリプトが実行されていました。