リソースの読み込みとページイベント

domLoading

ブラウザーがdomツリーの解析を開始する時間

domInteractive

ブラウザがdomツリーを解析したことを示します。

domContentLoaded

同期されたJSが実行されました。

ここでもう少し説明する必要があります：

同期JSはDomの分析をブロックするため、同期JSの場合、domInteractiveとdomContentLoadedの違いはそれほど大きくありません。
defer属性がJSに追加されている場合、domInteractiveとdomContentLoadedの時間差は、JSのダウンロード時間と実行時間によって異なります。defer JSは、このJSがdomInteractiveの後に実行されることをブラウザに通知します。http://www.w3.org/TR/html5/syntax.html#the-endを参照してください。JSの遅延が実行されると、domContentLoadedがトリガーされます。
JS属性が非同期の場合、jsの解析はdomもdomContentLoadイベントもブロックしないため、domContentLoadedとdomInteractiveはほぼ同じです。

オンロード

ページの要素が読み込まれました。すべてのCSS、JS、画像などを含みます。

いくつかの小さな実験

次の例はすべてブロッキングを実験として使用しており、オンラインバージョンにアクセスできます。

質問1：同期されたJSはdocument.write遅延DomContentLoadedを介してJSスクリプトに書き込みますか？

結論：はい。例からわかるように、DomContentLoadedは、同期的に書き込まれたJSファイルがトリガーされる前に書き込まれるのを待つ必要があります。

コード：

<html>
<head>
</head>
<body>
  <script>
  document.write('<script src="t/wait-3s.js"' + '></' + 'script>');
  </script>
  {{flush 1000}}
  <h1>Hello World</h1>
</body>
</html>

タイムライン：

質問2：同期JS動的挿入はJS遅延DomContentLoadedを延期しますか？

結論：comContentLoadedは遅延しませんが、オンロード時間はブロックされます。延期なしのJSが動的に挿入されても、DomContentLoadedが遅延しないことを追加する必要があります。

次のコードの場合：

<html>
<head>
</head>
<body>
  <script>
   var script = document.createElement('script');
   script.src= "/t/wait-2s.js";
   script.defer = true;
   document.head.appendChild(script);
  </script>
  {{flush 1000}}
  <h1>Hello World</h1>
</body>
</html>

タイムラインは次のとおりです（青はメインドキュメント、黄色の線はJSファイルです）。

質問3：domContentLoadedの実行時にスクリプト（sync / defer / async）が動的に挿入された場合、onloadイベントはブロックされますか？

結論：（Sync / defer / async）はonloadイベントをブロックします。

コード（例として据え置き）：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script>
   document.addEventListener('DOMContentLoaded', function(){
     var script = document.createElement('script');
     script.src= "/t/wait-2s.js";
     script.defer = true;
     document.head.appendChild(script);
   });
  </script>
  {{flush 1000}}
  <h1>Hello World</h1>
</body>
</html>

タイムライン：

上記の2つの小さな実験は、仕様で証明する必要があります。set of scripts that will execute as soon as possibleおよびthe list of scripts that will execute in order as soon as possibleが空になるまでイベントループをスピンします。

質問3：CSS /画像/ iframeがdomContentLoadedの間に動的に挿入された場合、onloadイベントはブロックされますか？

結論：ブロックします。動的に挿入された画像/ CSSはonloadイベントをブロックしますが、iframeはブロックしません。

コード（例として画像を使用）：

<html>
<head>
</head>
<body>


<script>
   document.addEventListener('DOMContentLoaded', function(){
     
     var img = document.createElement('img');
     img.src= "/t/wait-2s.png";
     document.body.appendChild(img);
     

     /*
     var link = document.createElement('link');
     link.rel = "stylesheet";
     link.href = "t/wait-3s-red.css";
     document.body.appendChild(link);
     */

     /*
     var iframe = document.createElement('iframe');
     iframe.src = "t/wait-3s.html";
     document.body.appendChild(iframe);
     */

     
   });
  </script>



  {{flush 1000}}


<h1>Hello World</h1>


</body>
</html>

結果：

[さらに追加する...]

domLoading

domInteractive

domContentLoaded

オンロード

いくつかの小さな実験

おすすめ