DOMContentLoaded event in JS/CSS/IMG loading sequence relationship

 

DOMContentLoaded Introduction

The DOMContentLoaded event is triggered:

The"All DOM is loaded and triggered after JS is loaded and executed".

However, if Javascript is dynamically loaded, the trigger time of DOMContentLoaded will not be affected"

As shown in, the blue line indicates that DOMContentLoaded starts to trigger, provided that JS has been loaded and executed.

(Only DOM is not triggered when the whole page of the onload event is fully loaded. If DOMContentLoaded is triggered earlier than onload, separate them. If onload is the red line, it indicates that all pages have been loaded)

 

What did IMG and CSS do before the DOMContentLoaded trigger?

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

But what about IMG and CSS? We can see that the DOMContentLoaded event is triggered, but some images are blocked.

Blocking means that the file is delayed by the browser, although the image request is sent very early.

However, the browser thinks that your CSS has not been fully loaded and is not sure about the image style. This involves redrawing resources.

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

The key point is: Although CSS style sheets block image loading, JS does not.

If your page does not have a CSS style sheet, all the images will be loaded as soon as possible, without judging whether your JS has been loaded.

This should be related to browser features. I use firefox 29.01.

 

Conclusion

1. CSS style sheets affect the image loading speed, but JS does not affect the image loading speed. If you want to load the image as soon as possible, do not use styles for the image. For example, use the label attribute for width and height.

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

References:

How does jquery's ready function work? This section describes the differences 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 (chrome is used in this article. I used firefox for testing and reorganized my knowledge. Thank you for writing 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 repost.