JavaScript DOMContentLoaded event case study

DOMContentLoaded Event

Literally, it fires after the DOM is loaded.

Very similar to the window.onload event, but with some differences:

1. The DOMContentLoaded event is triggered after the document is fully loaded and parsed;
2. The window.onload event not only completes the loading and parsing of the document, but also completes the loading of related resources, such as images and CSS files.

The next question is when the DOM is loaded. This starts with browser rendering. The process of browser displaying a web page can be described as follows:

1. Request an HTML document, and then request more img, css and other resource files based on the document;

2. Parse the document to get two things, DOM tree and CSS tree;

3. Generate render tree based on the above two trees;

4. Perform layout according to the render tree and draw related elements in it.

Taking webkit as an example, its rendering process is as follows:

DOMContentLoaded event triggers when:

After DOM and before RENDERtree.

JavaScript loading and execution will delay the triggering of the DOMContentLoaded event.

JavaScript has to wait for CSS rendering to complete before loading and executing, because the browser cannot determine whether JavaScript needs DOM element information.

To ensure that JavaScript has the latest information, the CSS is loaded and rendered first.

Reference Documents:

http://www.softwhy.com/article-9783-1.html

https://www.cnblogs.com/CandyManPing/p/6635008.html

https://www.cnblogs.com/caizhenbo/p/6679478.html

This is the end of this article about the detailed case of JavaScript DOMContentLoaded event. For more relevant JavaScript DOMContentLoaded event content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!