Home > Article > Web Front-end > Will css loading cause document parsing to be blocked?
Will css loading cause document parsing to be blocked?
- 零下一度Original
- 2017-07-19 17:05:202061browse
General script tags (without async and other attributes) will block the browser when loading. That is to say, when the browser downloads or executes the js code block, the following tags will not be parsed, such as adding in the head A script, but the network is unstable when downloading this script, and the corresponding js file has not been downloaded for a long time. Then the browser has been waiting for the js file to be downloaded. At this time, the page will not be rendered, and the user will see a white screen. (The web page file has been downloaded, but the browser does not parse it)
With the async attribute, the browser will download the js file and continue to render the subsequent content
Usually it can be used if js does not need to change the DOM structure async for asynchronous loading (for example, some statistics codes can be loaded asynchronously, because this code has nothing to do with the page execution logic and will not change the DOM structure)
Open the chrome console (press F12), you can see the picture below, Focus on the place where I drew the red circle
Click on the place where I drew the red circle (No throttling), you will see the picture below, We choose the GPRS option
In this way, the upper limit of our resource download speed will be limited to 20kb/s, okay, then let’s enter our The topic
#Will css loading block the parsing and rendering of the DOM tree?
Speak in code:
<!DOCTYPE html><html lang="en">
<head><title>css阻塞</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><style> h1 {color: red !important }</style><script> function h () {console.log(document.querySelectorAll('h1')) } setTimeout(h, 0)</script> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css?1.1.11" rel="stylesheet"> </head>
<body><h1>这是红色的</h1> </body></html>Assumption: css loading will block DOM tree parsing and rendering
Assumption result: bootstrap.css has not been loaded yet Before finishing, the following content will not be parsed and rendered, so what we see at the beginning should be a white screen, and h1 will not be displayed. And the result of console.log should be an empty array at this time.
Actual result: As shown below
Will css block DOM tree parsing?
We can see from the above picture that when the css has not been loaded, h1 is not displayed, but at this time the console output is as follows
It can be known , at this time the DOM tree has at least been parsed to h1, but the css has not been loaded yet, which means that the css will not block the parsing of the DOM tree.
Will css loading block DOM tree rendering?
From the above picture, we can also see that when the css has not been loaded, the page displays a white screen. It is not until the css is loaded that the red font is displayed. In other words, although the following content Parsed, but not rendered. Therefore, css loading will block DOM tree rendering.
Personal evaluation of this mechanism
其实我觉得，这可能也是浏览器的一种优化机制。因为你加载css的时候，可能会修改下面DOM节点的样式，如果css加载不阻塞DOM树渲染的话，那么当css加载完之后，DOM树可能又得重新重绘或者回流了，这就造成了一些没有必要的损耗。所以我干脆就先把DOM树的结构先解析完，把可以做的工作做完，然后等你css加载完之后，在根据最终的样式来渲染DOM树，这种做法性能方面确实会比较好一点。
Will css loading block js running?
From the above inference, we can conclude that css loading will not block DOM tree parsing, but it will block DOM tree rendering. So, will css loading block js execution?
Similarly, verify through code.
<!DOCTYPE html><html lang="en"> <head><title>css阻塞</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><script> console.log('before css') var startDate = new Date()</script> <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css?1.1.11" rel="stylesheet"> </head> <body><h1>这是红色的</h1> <script> var endDate = new Date() console.log('after css') console.log('经过了' + (endDate -startDate) + 'ms') </script> </body></html>
Hypothesis: css loading will block subsequent js execution
Expected results: The js code behind the link should be run after the css is loaded.
Actual results: 
From the above picture we can It can be seen that the js code located before the css loading statement is executed first, but the code located after the css loading statement is not executed until the css loading is completed. This also shows that css loading will block the execution of subsequent js statements. See the picture below for detailed results (css loading took 5600+ms):
Conclusion
From the above, we can draw the following conclusions:
css loading will not block the parsing of the DOM tree
css loading will block the rendering of the DOM tree
Css loading will block the execution of subsequent js statements.
Therefore, in order to avoid users seeing a long white screen time, we should improve the css loading speed as much as possible, such as You can use the following methods:
Use CDN (because CDN will select the nearest node with cached content to provide you with resources based on your network conditions, so it can reduce Loading time)
Compress css (you can use many packaging tools, such as webpack, gulp, etc., or you can turn on gzip compression)
Use cache reasonably (setting cache-control, expires, and E-tag are all good, but one thing to note is that after the file is updated, you need to avoid the impact of caching. One of the solutions and prevention is to Add a version number after the name)
Reduce the number of http requests, merge multiple css files, or simply write it directly as an inline style (a disadvantage of inline styles is that they cannot be cached)
The above is everything. If you think it’s good, please give me a recommendation hhhh, welcome to communicate
The above is the detailed content of Will css loading cause document parsing to be blocked?. For more information, please follow other related articles on the PHP Chinese website!