Introduction Everyone knows that after the HTML document is completely loaded and parsed, the DOMContentLoaded event will be triggered, so how does the content in the HTML affect the document parsing? Will parsing be affected when script tags or link tags are encountered during parsing? Let's analyze it together with the HTML5 specification through examples of different situations.

DOMContentLoaded trigger definition

After the HTML document is fully loaded and parsed, the DOMContentLoaded event will be triggered. Usually, the external style sheet and the image loading in the document will not affect the event triggering, but there are special cases, which we will mention later.

If a script tag is encountered, it will stop the document parsing and run the script, because the script may change the DOM, such as some document.write operations, but the script tag with the async attribute set will not affect the event triggering.

The following is a detailed analysis of the trigger timing of DOMCOntentLoaded in some scenarios.

script tag

The document parsing behavior will be different depending on the different attribute settings of the script tag,

The part about the script tag attribute in the HTML5 specification: html.spec.whatwg.org/multipage/s…

The main async and defer properties are:

async: When the script is available, it will be executed immediately, and parsing will not be blocked in the process of requesting resources. After the resource request is completed, if the document has not been parsed at this time, parsing will be blocked. Only if the script request takes longer than the document parsing time, it will not affect
defer: defer script execution to ensure that document parsing is not blocked, which means that even if the script is completed from the network request, it will not be executed immediately, only after the document parsing is completed.

Their attribute values are all boolean and are only valid if the src attribute is present.

The parsing time chart seen in the specification is very clear. The red line represents script script parsing, green represents html parsing, and blue represents network resource requests.

没设置属性的时候，script 标签在请求和执行的时候都会阻塞文档解析。defer 和 async 属性设置后，请求阶段不会影响解析，但是 async 的标签会立即执行，影响解析。后面 type="module" 的情况跟上面相同。

总结一下，文档里面 script 标签，在两种情况下不会影响文档解析：

设置了 defer 属性
设置了 async 属性，并且脚本请求完成时，文档已经解析完成了

外部样式表

样式表通常不会影响 html 文档解析。

在浏览器的工作原理文章里面，提到样式表理论上不会改变 DOM 树，因此 html 解析的时候不会等待样式表。

但是脚本在文档解析阶段去请求样式信息，此时还没有加载和解析样式，脚本就会得到错误的结果。所以是否影响文档解析这里要区分一下样式表的不同情况。

1. 样式表后面紧跟着 script 脚本

<html lang=en>
 <head>
     <link rel="stylesheet" href="//8.idqqimg.com/edu/assets/css/common_css_e582a1d4.css">
     <script>console.log(121212)</script>
 </head>
 <body>
   <p>23233</p>
 </body>
</html>
复制代码

从 chrome 开发者工具里面的 Performance 分析看：

蓝色竖线 DCL，表示触发 DOMContentLoaded 时刻，也就是说在 css 加载完成后触发的。

蓝色 Parse Stylesheet 部分，表示解析前面下载完成的样式表。

黄色 Evaluate Script 部分，执行脚步，从下面的 Summary 可以定位到刚好是第 4 行执行 console.log。

这种情况下是影响了文档解析。

2. 样式表后面没有 script 脚本

<html lang=en>
 <head>
     <script>console.log(121212)</script>
     <link rel="stylesheet" href="//8.idqqimg.com/edu/assets/css/common_css_e582a1d4.css">
 </head>
 <body>
   <p>23233</p>
 </body>
</html>
复制代码

还是从 Performance 分析：