Introducción Todo el mundo sabe que una vez que el documento HTML está completamente cargado y analizado, se activará el evento DOMContentLoaded, entonces, ¿cómo afecta el contenido del HTML al análisis del documento? ¿Se verá afectado el análisis cuando se encuentren etiquetas de script o etiquetas de enlace durante el análisis? Analicémoslo junto con la especificación HTML5 a través de ejemplos de diferentes situaciones.

Definición de disparador DOMContentLoaded

Después de que el documento HTML esté completamente cargado y analizado, se activará el evento DOMContentLoaded. Por lo general, la hoja de estilo externa y la carga de imágenes en el documento no afectarán la activación del evento, pero hay casos especiales, que mencionaremos más adelante.

Si se encuentra una etiqueta de secuencia de comandos, detendrá el análisis del documento y ejecutará la secuencia de comandos, ya que la secuencia de comandos puede cambiar el DOM, como algunas operaciones document.write, pero la etiqueta de secuencia de comandos con el conjunto de atributos asíncronos no afectará la activación del evento.

El siguiente es un análisis detallado del tiempo de activación de DOMCOntentLoaded en algunos escenarios.

etiqueta de secuencia de comandos

El comportamiento de análisis del documento será diferente dependiendo de las diferentes configuraciones de atributos de la etiqueta del script,

La parte sobre el atributo de la etiqueta del script en la especificación HTML5: html.spec.whatwg.org/multipage/s…

Las principales propiedades async y defer son:

asíncrono: cuando el script esté disponible, se ejecutará de inmediato y el análisis no se bloqueará en el proceso de solicitud de recursos. Una vez completada la solicitud de recursos, si el documento no se ha analizado en este momento, se bloqueará el análisis. Solo si la solicitud del script lleva más tiempo que el tiempo de análisis del documento, no afectará
diferir: diferir la ejecución del script para garantizar que el análisis del documento no se bloquee, lo que significa que incluso si el script se completa desde la solicitud de red, no se ejecutará inmediatamente, solo después de que se complete el análisis del documento.

Los valores de sus atributos son todos booleanos y solo son válidos si el atributo src está presente.

El gráfico de tiempo de análisis que se ve en la especificación es muy claro. La línea roja representa el análisis de secuencias de comandos, la verde representa el análisis de html y la azul representa las solicitudes de recursos de red.

没设置属性的时候，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 分析：