May we all know, js execution block the parsing and rendering DOM tree, then load the css will block the DOM tree parsing and rendering it? Next, we will work together to analyze.
Analytical principle
So why will appear above phenomenon? We come down from the rendering process to resolve browser.
Different browsers use different cores, so they are rendering process is not the same. There are two main:
webkit rendering process
Gecko rendering process
We can see from the above two flow charts, browser rendering process is as follows:
- HTML parsing files generated DOM Tree, parse CSS file generation CSSOM Tree
- The Dom Tree and CSSOM Tree combine to produce Render Tree (tree rendering)
- According to Render Tree rendering drawn, the pixel rendering to the screen.
We can see from the process
- DOM parsing and CSS parsing are two parallel processes, so this also explains why the CSS parsing the DOM to load without blocking.
- However, due to the Render Tree is dependent on the DOM Tree and CSSOM Tree, so he must wait to CSSOM Tree is built, which is loaded CSS resource (or resource loading failure CSS) only after the start rendering. Therefore, CSS is loaded clog Dom rendered.
- Because js might be operating before Dom node and css styles, so the browser will be the order of the html and css js maintain. Therefore, style sheets can be loaded in the front and back of the finished js execution. So js css will block the execution behind.
DOMContentLoaded
For the browser, the page loads two main events, one DOMContentLoaded, and the other is onLoad. The onLoad nothing to say, is that all resources are waiting for pages to load completion will trigger these resources include css, js, images and video.
And DOMContentLoaded, by definition, when the content of the page is parsed, the event is triggered. Well, as we discussed above, css will block the rendering and js execution Dom, Dom and js block the resolution. Then we can make the assumption that
- When the page there is only css, js or in front of css, you do not need to wait until then DomContentLoaded css loaded.
- When pages exist css and js, css and js at a later time, DomContentLoaded must wait until the css and js are loaded only trigger.
Let's do the test for the first case:
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded');
})
</script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>
<body>
</body>
</html>
The results as shown below:
从动图我们可以看出来，css还未加载完，就已经触发了DOMContentLoaded事件了。因为css后面没有任何js代码。
接下来我们对第二种情况做测试，很简单，就在css后面加一行代码就行了
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded');
})
</script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
<script>
console.log('到我了没');
</script>
</head>
<body>
</body>
</html>
实验结果如下图：
We can see, only after css loaded to trigger DOMContentLoaded event. Therefore, we can conclude:
- If there css and js pages at the same time, in the back and there js css, the event will only execute DOMContentLoaded After loading the css.
- In other cases, DOMContentLoaded will not wait for css load, and DOMContentLoaded events will not wait for pictures, video and other loads of other resources.
to sum up
From the above, we can draw the following conclusions:
- css load without blocking the DOM tree parsing
- Load css will block the rendering of the DOM tree
- css load block the execution behind js statement,
Therefore, to avoid allowing users to see a long white screen time, we should maximize the css loading speed, for example, you can use the following methods:
- Use CDN (CDN because the network based on your situation, for you to choose the nearest node has a cache content to provide resources for you, so you can reduce the loading time)
- Compression of css (many can be packed with a tool, such as webpack, gulp, etc., may be opened by compression gzip)
- Impact of rational use of cache (set cache-control, expires, and E-tag is good, but pay attention to a problem that the files are updated, you should avoid caching brought. One solution is to prevent the file name back plus a version number)
- Reduce the number of http requests, merge multiple css files, or simply direct written inline style (a drawback inline style is not cached)