深入解析HTML中script标签的defer与async属性差异

script标签的基本引入方式与阻塞问题

在HTML页面中嵌入JavaScript代码主要依赖script标签，具体包含两种实现方式：一是直接在标签内编写JS代码，二是通过src属性引入外部JS文件。由于JavaScript解释器在执行代码时会阻塞页面其他部分的渲染，若页面包含大量JS代码，可能导致浏览器出现长时间白屏或延迟。为解决此问题，通常建议将所有JS引用放置在</body>标签之前。

defer与async属性的机制解析

script标签提供了defer和async两个属性，这使得脚本的使用场景扩展为三种主要情况：

1. <script src="example.js"></script>

当script标签未设置defer或async属性时，浏览器会立即加载并执行对应的脚本。这意味着在解析到script标签后，浏览器不会等待后续文档元素的加载，而是直接开始加载和执行脚本，这一过程会阻塞后续文档的渲染与加载。

2. <script async src="example.js"></script>

添加async属性后，表示后续文档的加载与渲染过程与JS脚本的加载和执行是并行进行的，即实现异步执行。

3. <script defer src="example.js"></script>

添加defer属性后，后续文档的解析过程与JS脚本的加载过程（此时仅加载不执行）并行进行（异步）。JS脚本的执行必须等待文档所有元素解析完成后，且在DOMContentLoaded事件触发之前执行。

下图直观展示了这三种方式的区别：

图中蓝色区域代表JS脚本的网络加载时间，红色区域代表JS脚本的执行时间，绿色区域代表HTML的解析过程。

加载与执行时机的对比分析

通过图表分析，可以明确以下几点：

1. defer和async在网络加载阶段表现一致，均采用异步加载方式；

2. 两者的核心区别在于脚本加载完成后的执行时机。从图中可见，defer模式更符合大多数应用场景中对脚本加载和执行的顺序要求；

3. 若存在多个带有defer属性的脚本，它们将严格按照声明顺序执行；而对于async属性，其加载与执行紧密相连，无论声明顺序如何，只要脚本加载完成便会立即执行。由于async完全不考虑脚本间的依赖关系，因此对于需要依赖关系的应用脚本而言，其用处有限。

defer与async的核心差异总结

小结：

defer和async的共同点在于均能并行加载JS文件，不会阻塞页面的主流程加载。不同点在于执行时机：defer模式在脚本加载完成后，会等待整个页面全部加载完毕后再执行；而async模式在脚本加载完成后会立即执行。因此，若对JS的执行顺序有严格要求，建议使用defer属性进行加载。

以上所述是小编给大家介绍的JS中script标签defer和async属性的区别详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！