Events and sequence triggered when page loads

Foreword

When the page is loaded, it can be roughly divided into the following steps:

1. Start parsing the HTML document structure

2. Loading external style sheets and JavaScript scripts

3. Parsing and executing JavaScript scripts

4. DOM tree rendering completed

5. Loading unfinished external resources (such as pictures)

6. The page is loaded successfully

So what are triggered in the whole processWhat about the commonly used events?

document readystatechange event

　readyState The attribute describes the loading status of the document. Document.readyState will continue to change during the entire loading process, and each change will trigger the readystatechange event.

　readyState has the following status:

　 Loading / Loading document is still loading.

Interactive / The interactive document has completed loading and the document has been parsed, but sub-resources such as images, stylesheets and frames are still loading.

Complete / Complete T document and all sub-resources have been loaded. The status indicates that the load event is about to be triggered.

For example, in step 2 corresponding to interactive and after step 5 corresponding to complete, the readystatechange event will be triggered.

PS: readyState and XMLHttpRequest.readyState when loading documents, images, etc. are different. Pay attention to distinguish

document DOMContentLoaded event

The DOMContentLoaded event is triggered when the DOM tree rendering is completed. At this time, external resources may still be loading. The ready event in jquery has the same effect

window load event

When all resources are loaded, the load event of the window will be triggered.

The load event of document cannot be triggered, but there is this event on MDN? Ask God for guidance! ! !

Example

  <h1 id="测试页面加载时-事件触发次序">测试页面加载时，事件触发次序</h1>
  <img src="/static/imghwm/default1.png"  data-src="http://c.hiphotos.baidu.com/image/pic/item/09fa513d269759eea79bc50abbfb43166c22df2c.jpg"  class="lazy"   alt="">
  <h1 id="测试页面加载时-事件触发次序">测试页面加载时，事件触发次序</h1>
  <img src="/static/imghwm/default1.png"  data-src="http://h.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fb75ed26e764224f4a21a4ddcc.jpg"  class="lazy"   alt="">
  <h1 id="测试页面加载时-事件触发次序">测试页面加载时，事件触发次序</h1>
  <script type="text/javascript">
    console.log(&#39;resolve body JavaScript&#39;);
   
    window.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;window load&#39;);
    })

    document.addEventListener(&#39;readystatechange&#39;,function(){
      console.log(&#39;document &#39; + document.readyState);
    })

    document.addEventListener(&#39;DOMContentLoaded&#39;,function(){
      console.log(&#39;document DOMContentLoaded&#39;);
    })    //document 没有load事件??    document.addEventListener(&#39;load&#39;,function(){
      console.log(&#39;document load&#39;);
    })  </script>

The log output in chrome is as follows:

resolve body JavaScript --> document interactive --> document DOMContentLoaded --> document complete --> window load

Exactly as expected. Therefore, scripts that only need the document structure to be loaded before they can be executed can monitor DOMContentLoaded; scripts that need all content to be loaded before they can be executed should monitor window.onload or document.readyState === 'complete'.

The above is the detailed content of Events and sequence triggered when page loads. For more information, please follow other related articles on the PHP Chinese website!