Let's talk about how CSS and JS block DOM parsing and rendering

This article will introduce to you the principle of CSS and JS blocking DOM parsing and rendering. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#hello~ Dear readers, hello everyone. I guess everyone has heard that try to put CSS at the head and JS at the bottom, which can improve the performance of the page. However, why? Have you considered it? For a long time, I knew it but didn't know why. Of course it was OK to memorize it for exams, but it would be a mess in actual application. So wash (wang) heart (yang) leather (bu) face (lao) and summarize the recent results.

Friendly reminder, this article is mainly for beginners. If you want to see the conclusion directly, you can scroll to the bottom~

Because it is related to the reading of files, that is for sure If you need a server, I will put all the files on github, give me a star and I will be happy!

nodeThe only thing that needs to be explained is this function:

function sleep(time) {
  return new Promise(function(res) {
    setTimeout(() => {
      res()
    }, time);
  })
}

Hmm! In fact, it’s delayed. If the CSS or JS file name has a prefix such as sleep3000, it means that the file will be returned after a delay of 3000 milliseconds.

The HTML file used below looks like this:

I will insert different JS and CSS## into it #.

common.css used, regardless of whether there is a prefix or not, the content is like this:

div {
  background: lightblue;
}

CSS

CSS, everyone must know that the tag is placed in the head performance It will be a little higher, and fewer people know that if in the header. , the content of the JS file is:

const div = document.querySelector('div');
console.log(div);

defer attribute I believe everyone is familiar with it, MDNThe description of this is to inform The browser script will be executed after the document completes parsing and before the DOMContentLoaded event is triggered. Setting this property ensures that div is printed out immediately after DOM is parsed.

into any position of the HTML file, When you open the browser, you can see that the DOM node div is first printed, and after about 3 seconds, a light blue div is rendered. This proves that CSS will not block the parsing of DOM. Although CSS takes 3 seconds to download, the browser will not wait stupidly during this process. CSSAfter downloading, DOM will be parsed.

DOM to generate DOM Tree, and combines CSS to generate CSS Tree , finally form render tree, and then render the page. It can be seen that CSS has no influence on DOM Tree during this process, so there is no need to block DOM parsing. However, DOM Tree and CSS Tree will be combined into render tree, so will CSS block the rendering of the page?

CSS Blocking page rendering

CSS will not block If the page blocks rendering, then the browser will render a light green div before the CSS file is downloaded, and then turn to light blue. This strategy of the browser is actually very wise. Imagine that without this strategy, the page would first show an original appearance, and then suddenly change its appearance after CSS is downloaded. The user experience is extremely poor, and rendering is costly.

CSS naturally blocks page rendering.

HTMLThe header structure is as follows:

答案是浏览器会转圈圈三秒，但此过程中不会打印任何东西，之后呈现出一个浅蓝色的div，再打印出null。结果好像是CSS不单阻塞了页面渲染，还阻塞了DOM 的解析啊！稍等，在你打算掀桌子疯狂吐槽我之前，请先思考一下是什么阻塞了DOM 的解析，刚才已经证明了CSS是不会阻塞的，那么阻塞了页面解析其实是JS！但明明JS的代码如此简单，肯定不会阻塞这么久，那就是JS在等待CSS的下载，这是为什么呢？

仔细思考一下，其实这样做是有道理的，如果脚本的内容是获取元素的样式，宽高等CSS控制的属性，浏览器是需要计算的，也就是依赖于CSS。浏览器也无法感知脚本内容到底是什么，为避免样式获取，因而只好等前面所有的样式下载完后，再执行JS。因而造成了之前例子的情况。

所以，看官大人明白为何