Home > Developer > Web Develop
Domcontentloaded Trigger principle:
1, the specification is always so obscure, but at least one thing can be clear, that is, JS (not including the dynamic insertion of JS) after the execution, will trigger the domcontentloaded event.
2, domcontentloaded event itself will not wait for CSS files, pictures, iframe loading complete.
The trigger time is: Load the page, parse all the tags (excluding the execution of CSS and JS), and as stated in the specification of the settings interactive and execute each static script tag js, and then triggered.
And the execution of JS, you need to wait for the CSS in front of the load (if it is an outreach), execution, because JS may rely on the CSS in front of it to calculate the style
Index.html:
<!DOCTYPE html>
Figure A
If there is no script tag in the page, the Domcontentloaded event does not wait for the CSS file to load.
The timeline panel of the Chrome developer tool can help us record the browser's every move. The Blue Line in the small red box in Figure one represents the Domcontentloaded event, and the red and green lines on the right represent the Load event and first paint, respectively. Mouse hover tips with explanatory text when these lines reveal a small portion of the gray box (this interaction is anti-human, right!). ）。
Experiment 2:domcontentloaded event needs to wait for JS to execute before triggeringIndex.html:
<!DOCTYPE html>
Main.js:
console.timeStamp(‘External script after link in body‘);
Figure II
If the page is statically written with a script tag, the domcontentloaded event needs to wait for JS to finish executing before triggering.
The JavaScript in the script tag needs to wait for the loading of the CSS in front of it to complete.
console.timeStamp()You can add a record to the timeline and correspond to a yellow line above it.
From the figure II can be seen in the CSS before the JS immediately get executed, and in the CSS after the JS, need to wait for the CSS to load after the execution, it is obvious that the main.js has been loaded, but still have to wait until main.css loaded to execute. The domcontentloaded event is triggered only after JS has been executed. Slide the slider in the timeline panel that represents the display area, and three, zoom in to see the Blue line that represents the Domcontentloaded event (it was too close to the yellow and green lines), and of course, the console.timeStamp() trigger time is evidenced by the records added to the timeline.
Might
Modern browser will be concurrent pre-loaded CSS, JS, that is, the beginning of concurrent requests for these resources, but the execution of CSS and JS order or in the original Order of dependence (JS execution to wait for the CSS and JS in front of the loading, execution). The completed resources are loaded first, and if their dependencies are not loaded and executed, they can only wait.
When did the experiment 3:img start decoding and plotting?From figure three we can find an interesting place: an IMG request has been issued long ago, but it has been delayed for some time before it starts decoding. Two, the red box in figure three shows that the only part of the box shows the decoded records, and in fact, these decoding records continue until the end of the IMG loading, as shown in four, IMG is one side of the load decoding:
Figure Four
With the idea of "conjecture-verification", I guess this is because the IMG resource needs to be shown and needs to wait until all the JS and CSS are executed . Because main.js may perform certain DOM operations, such as deleting the IMG element, or modifying its src attribute, the CSS might have it display: none .
Figure Five
Figure Six
Figure Seven
Figure v the data without JS and css,img begins decoding as soon as it is received.
There is no JS in Figure VI, but IMG will not start decoding until the CSS is loaded.
The code in Figure Seven is the only difference from the code in figure six is that the CSS gives the img display: none; , which makes the IMG request but does not decode at all.
This shows that if the IMG needs decoding, drawing (paint) out, it does need to wait for the CSS to load, execute to know. In other words, CSS will block IMG's presentation! So what about JS?
Figure Eight
Figure eight corresponds to the code:
<!DOCTYPE html>
Very surprising, in the page with JS without CSS, IMG Incredibly able to receive data immediately after the decoding, drawing (paint), that is, JS does not block the display of IMG! This is not the same as the traditional idea that JS will block IMG Resources as we have previously understood, and it seems that Chrome has made new optimizations for the loading and presentation of IMG.
Our common approach to jquery $(document).ready() is to monitor the Domcontentloaded event (which, of course, provides a downgrade by simulating the domcontentloaded event and monitoring the OnLoad event). It is generally recommended to register events for DOM elements when the domcontentloaded event is triggered. So as soon as possible to let the domcontentloaded event trigger, it means that the page can be interactive as soon as possible:
- Reduce CSS file volume, separate CSS files into several files to load in parallel, reducing CSS blocking time for JS
- A secondary JS file that is loaded dynamically by inserting a script tag (dynamically inserted script tag does not block the triggering of the domcontentloaded event)
- The sprite diagram used in CSS can be loaded with the CSS file in HTML using the pre-loading of the IMG.
In the process of doing the experiment, I felt that the timeline panel of the Chrome developer tools was very powerful and the browser's movements were recorded. Before our front-end development to understand, explore the browser's internal behavior, or stones to do black box testing, or less research browser source code, the only effective point is to learn the experience of others, look at the foreigner's article, But the development of the browser is changing rapidly (such as the experiment found that JS does not block the display of IMG), the experience of others is not the latest and most suitable, the key is to combine their own business, demand scenarios, targeted analysis and optimization.
Forwarding Address: http://www.alloyteam.com/2014/03/effect-js-css-and-img-event-of-domcontentloaded/
Domcontentloaded time-triggered association with JS,CSS,IMG
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
