1. HTML Document Loading Sequence.
- HTML DOM document loading is done in order, it follows the rendering order of the web browser, and the web browser rendering order is typically done in the below steps.
- Parse HTML web page structure.
- Construct the HTML DOM model tree.
- Load external image, audio, or video files.
- Web page load complete.
- The window.onload event must wait until all the content on the web page has been fully loaded before being executed.
- If there is a large multimedia file is included on a page, the page will appear, but because the page data is not fully loaded the window.onload event cannot be triggered immediately.
- Developers are used to putting page initialization scripts in the window.onload event handler. But because the page data are not fully loaded in, this will lead to an issue that the web page DOM structure has been parsed out but the initialization scripts can not able to be executed, this may affect the usability of the page, for example, hide some web elements in the initialization scripts.
- But the document.ready event in jQuery is executed after the web page DOM structure is parsed, which means that it is executed before the external file is loaded so that the document rendering and the script initialization executing are kept in sync.
- Window.onload event will be executed only when all page resources ( images, audio, video, etc ) have been downloaded to the page.
- jQuery document.ready will be executed just after the Html dom tree has been parsed out. So it is far earlier executed than window.onload.
- In summary, the jQuery document.ready event is triggered before the window.onload event, and if there do not has large external files to be loaded in the web document, their response time is essentially the same.
- To see the above result, just right-click the web page in the google chrome browser and click the Inspect menu item in the popup menu list then click the Console tab to see the below result.
jQuery document ready complete time is : 16 Window onload complete time is : 930
- Below is the example Html source code.