JS/CSS/IMG loading order relationship DOMContentLoaded event_html/css_WEB-ITnose

Introduction to DOMContentLoaded

The triggering condition of the DOMContentLoaded event is:

will be executed after "all DOMs are loaded and JS is loaded and executed. trigger later".

But if "js is loaded dynamically, it will not affect the triggering time of DOMContentLoaded"

As shown in the figure below, the blue line means that DOMContentLoaded starts to trigger, but the premise is JS has been loaded and executed.

(It’s just the DOM, not the onload event that is triggered when the entire page is loaded. DOMContentLoaded is triggered earlier than onload, so please distinguish it. The red line on onload means that the page has been fully loaded)

What did IMG and CSS do before DOMContentLoaded was triggered?

As mentioned above, JS has been executed before DOMContentLoaded is triggered.

But what about IMG and CSS? Let's look at the picture below: The DOMContentLoaded event is triggered, but some pictures are blocked.

Blocking means that the browser delayed loading, although the image request was sent very early.

But the browser thinks that your CSS has not been loaded, and it is not sure what the style of the image is, which involves redrawing resources.

The image will then be loaded after the CSS is loaded. (There is no blocked image request in the picture below because there is no style name. Considering that CSS will not change it, the browser does not need to block it)

The key point is: although CSS Style sheets will block the loading of images, but: JS will not.

If your page does not have a CSS style sheet, all images will be loaded at the first time, and it will not be judged whether your JS has been loaded before loading the images.

This should be related to browser features. I am using firefox 29.01

Final conclusion

1. CSS style sheets affect images However, JS will not affect the loading speed. If you want the image to load as quickly as possible, do not use styles for the image. For example, just use label attributes for the width and height.

2. The loading execution speed of JS affects the triggering time of the DOMContentLoaded event. If you want to trigger the DOMContentLoaded event as soon as possible, load the secondary JS using dynamic loading.

Reference:

How does jquery’s ready function work? Introduced the difference between loading response events.

http://www.cnblogs.com/haogj/archive/2013/01/15/2861950.html

The impact of JS, CSS and img on the DOMContentLoaded event (this article uses The one is Chrome. I later tested it with Firefox and reorganized the knowledge. I would like to thank the author of this article! )

http://www.alloyteam.com/2014/03/effect-js- css-and-img-event-of-domcontentloaded/

Author: Margo_test
Source: http:// /www.cnblogs.com/margo/

Welcome to share and reprint.