domcontentloaded event of js/css/img loading sequence relation

The trigger condition for the domcontentloaded event is:

Will be triggered after all the DOM is loaded and the JS load executes.

But if "JS is dynamically loaded in, it will not affect the domcontentloaded trigger time"

As shown in the following figure, the Blue line represents domcontentloaded start, but only if JS has been loaded and executed.

(Just Dom is not the OnLoad event the entire page loaded complete trigger, domcontentloaded than the onload before the trigger please separate, onload for the red line means that the page has been loaded complete)

What do img and CSS do before domcontentloaded triggers?

It says that before the domcontentloaded trigger, JS has been executed.

But what about IMG and CSS? Let's look at the picture below: The domcontentloaded event was triggered, but some of the pictures were blocked.

Blocking is also meant to be delayed loading by the browser, although the picture request was sent out early.

But browsers think that your CSS is not loaded, not sure how the style of the picture, involved in redrawing the resource problem.

The picture will be loaded after the CSS is loaded. (The picture request without blocking is because there is no style name, and the browser doesn't need to block it, considering that CSS doesn't change it)

The key point is: Although the CSS stylesheet will block the loading of the picture, but: JS does not.

If your page does not have a CSS style sheet, the picture will all be loaded at the first time, will not determine whether you JS loaded, before loading the picture.

This should be related to browser features, I'm using Firefox 29.01

The final conclusion

1, CSS style sheet affects the loading speed of the picture, however, JS will not affect, if you want to let the picture load as soon as possible, do not give pictures use style, such as the wide use of label properties can be.

2, JS load execution speed affected the Domcontentloaded event trigger time, if you want to trigger the Domcontentloaded event as soon as possible, will be secondary JS dynamic loading of the way load it.

Resources:

How does the ready function of jquery work? Describes the differences in load response events.

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

JS, CSS and img impact on the domcontentloaded event (this article uses chrome, I later used the Firefox test, the knowledge of the comb again, thanks to this author!) ）

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