关于解析 HTML 过程中遇到 script 标签

当在解析 HTML 的过程中遇到 <script> 标签时,浏览器的处理方式如下:

1. 阻塞解析

  • 如果 <script> 标签没有设置 asyncdefer 属性,浏览器会暂停 HTML 的解析,直到该脚本下载、解析和执行完成。这是因为 JavaScript 代码可能会修改正在构建的 DOM,所以浏览器需要确保在执行脚本之前 DOM 的状态是稳定的。

2. 异步加载和执行(使用 async 属性)

  • 如果 <script> 标签设置了 async 属性,浏览器会在后台异步下载该脚本。一旦脚本下载完成,浏览器会暂停 HTML 的解析,执行该脚本,然后继续解析 HTML。

3. 延迟执行(使用 defer 属性)

  • 如果 <script> 标签设置了 defer 属性,浏览器会在后台异步下载该脚本,但不会暂停 HTML 的解析。脚本会在 HTML 文档解析完成后,按照它们在文档中出现的顺序执行。

总的来说,<script> 标签的出现会影响 HTML 的解析过程,开发人员可以根据具体需求使用 asyncdefer 属性来控制脚本的加载和执行时机,以优化页面的性能和加载速度。