Detailed CSS loading will cause blocking? _css Tutorial _css_ Web Authoring

This time to give you a detailed explanation of CSS loading will cause blocking, CSS loading caused blocking the attention of what, the following is the actual case, take a look.

Finally, the exam is over, today, suddenly think of the former when looking for an internship, today's headline interviewer asked me, JS execution will block the DOM tree parsing and rendering, then CSS loading will block the DOM tree parsing and rendering it? So, next I'm going to do a test of CSS loading parsing and rendering of the DOM tree.

In order to complete this test, first to science, how to use Chrome to set the download speed

1, open the Chrome console (press F12), you can see, focus on the place where I painted the red circle

2, click I draw the place of Red circle (No throttling), will see, we choose GPRS this option

3, so that our download speed limit on the resources will be limited to 20kb/s, good, then go to our point of

Does CSS loading block parsing rendering of the DOM tree?

To speak in code:

<! DOCTYPE html>


Assumption: CSS loading blocks dom tree parsing and rendering

Assuming the result: before the BOOTSTRAP.CSS has finished loading, the following content will not be parsed and rendered, then we should first see the white screen, H1 will not be displayed. And the result of this console.log should be an empty array.

Actual results: such as


Does CSS block DOM tree parsing?

As we can see, the H1 is not displayed when the CSS is not loaded, but the console output is as follows


It can be learned that at this time the DOM tree has been at least resolved to H1 there, and when the CSS has not yet finished loading, it also shows that CSS does not block the parsing of the DOM tree.

Does CSS loading block DOM tree rendering?

From, we can also see, when the CSS has not been loaded out, the page Display white screen, until the completion of the CSS loading, the red font is displayed, that is, the following content, although parsed, but it is not rendered. Therefore, CSS loading can block DOM tree rendering.


An individual's assessment of this mechanism

In fact, I think, this may also be a browser optimization mechanism. Because when you load CSS, you may modify the style of the following DOM nodes, if the CSS loading does not block the DOM tree rendering, then when the CSS is loaded, the DOM tree may have to re-redraw or reflow, which creates some unnecessary loss. So I simply first parse the structure of the DOM tree, finish the work that can be done, and then wait for your CSS to load up and render the DOM tree based on the final style, which is really a bit better performance.

Will CSS loading block JS run?

From the above inference, we can conclude that CSS loading does not block DOM tree parsing, but it blocks DOM tree rendering. So, will CSS loading block js execution?

Again, it is validated by code.


<! DOCTYPE html>


Assumption: CSS loading will block the subsequent JS run

Expected Result: The JS code behind the link should not be run until the CSS has finished loading

Actual results:

As we can see, the JS code that precedes the CSS Load statement executes first, but the code behind the CSS load statement is not executed until the CSS is loaded. This also shows that CSS loading will block the execution of subsequent JS statements. See the detailed results (CSS loaded with 5600+ms):


Conclusion

From the above, we can draw the following conclusions:

1.css loading does not block parsing of the DOM tree
2.css loading blocks rendering of the DOM tree
3.css loading blocks Execution of subsequent JS statements

Therefore, in order to avoid allowing users to see a long time of white screen time, we should try to improve the CSS loading speed, such as the following methods can be used:

1. Use a CDN (because the CDN will pick up the nearest node that has the cache content for you based on your network conditions, so you can reduce the load time)
2. Compress the CSS (you can use a lot of packaging tools, such as WEBPACK,GULP, etc., you can also open gzip compression)
3. Reasonable use of the cache (set Cache-control,expires, and E-tag are good, but one problem is that after the file is updated, you have to avoid the impact of caching. One of the workarounds is to add a version number after the file name)
4. Reduce the number of HTTP requests, merge multiple CSS files, or simply write inline styles directly (one disadvantage of inline styles is that they cannot be cached)

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:

How CSS makes 0.5-pixel lines

CSS3 Transition Smooth Transition menu bar implementation