1. HTML Document Loading Sequence.
HTML DOM document loading is done in order, it follows rendering order of web browser, and web browser rendering order is typically done in 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 in the web page has been fully loaded before being executed. If a large multimedia file is included in 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 put page initialization script 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 ) has been downloaded in the page.
- jQuery document.ready will be executed just after html dom tree has been parsed out. So it is far more 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 above result, just right click web page in google chrome browser and click Inspect menu item in the popup menu list then click Console tab.