ページ読み込み時にトリガするイベントと手順

前言
ページ読み込み時には、大きく分けて以下のステップがあります.

HTML文書構造の解析を開始する

外部スタイルテーブルおよびJavaScriptスクリプトをロードする

解析実行JavaScriptスクリプト

DOMツリーレンダリング完了

未完成の外部リソース(画像など)をロードする

       ページ読み込み成功

その過程で、どのような一般的なイベントが発生しましたか?
document readystatechangeイベント
readyState 属性はドキュメントのロード状態を説明しています.ロード全体でdocument.readyStateは絶えず変化しています.毎回変化するたびにreadystatechangeイベントがトリガされます.
readyStateには以下の状態があります.
loading/ ローディングdocument まだロード中です
インターアクティヴ/ インタラクティブドキュメントの読み込みが完了しました.ドキュメントは解析されましたが、画像、スタイルシート、フレームなどのサブリソースはまだロードされています.
complete/ Tドキュメントとすべてのサブリソースの読み込みが完了しました.状態表示  load イベントがトリガされます.
例えば、ステップ2の時に対応します. インターアクティヴ  ステップ5の後にcompletteeに対応すると、readystatechangeイベントが発生します.
PS:ドキュメント、画像などの読み込み時のreadyStateと XMLHttpRequest.readyStateは違います.区分に注意してください
document DOMContentLoaded事件
DOMツリーレンダリングが完了すると、DOMContentLoadedイベントがトリガされ、外部リソースがまだロードされている可能性があります.jqueryのreadyイベントは同じ効果です.
ウィンドロード事件
すべてのリソースが全部ロードされたらWindowsのロードイベントが発生します.
doucmentのロードイベントはトリガできませんが、MDNではこのイベントがありますか?大神の指導を求めます!!
実例

  <h1>       ，      h1>
  <img src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg" alt="">
  <h1>       ，      h1>
  <img src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg" alt="">
  <h1>       ，      h1>
  <script type="text/javascript">
    console.log('resolve body JavaScript');
   
    window.addEventListener('load',function(){
      console.log('window load');
    })

    document.addEventListener('readystatechange',function(){
      console.log('document ' + document.readyState);
    })

    document.addEventListener('DOMContentLoaded',function(){
      console.log('document DOMContentLoaded');
    })
    //document   load  ??
    document.addEventListener('load',function(){
      console.log('document load');
    })
  script>

chromeでのログ出力は以下の通りです.
reolve body JavaScript--> document interactive-> document DOMContent Loaded--> document complete--> window load 
期待にぴったりです.したがって、ドキュメント構造の読み込みが完了するだけで実行できるスクリプトは、DOMContentLoadedを傍受することができます.すべての内容をロードして完成しなければいけないです.実行するスクリプトはwindow.onloadをモニターします. またはdocument.readyState=='complette'です.　　
　　
 
転載先:https://www.cnblogs.com/shapeY/p/7662406.html