script标签中defer和async的区别

最新推荐文章于 2024-05-29 21:00:41 发布

亮学长

最新推荐文章于 2024-05-29 21:00:41 发布

阅读量812

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/formylovetm/article/details/136203491

版权

本文详细比较了HTML中defer和async属性在脚本加载顺序、执行时机以及依赖性上的差异，指出defer适合有序执行且在文档解析后，而async适用于无依赖的并行加载，立即执行。

摘要由CSDN通过智能技术生成

defer 和 async 是用于在 HTML <script> 标签中控制脚本加载和执行的属性。它们有以下区别：

加载顺序：
- defer：脚本将按照 HTML 文档的顺序加载，并在文档解析完毕后执行。多个带有 defer 属性的脚本会按照它们在文档中的顺序依次执行。
- async：脚本的加载和页面其他内容的加载是异步进行的，不会阻塞HTML文档的解析过程。脚本加载完成后立即执行，不保证多个带有 async 属性的脚本的执行顺序。
执行时机：
- defer：脚本在文档解析完成后才执行，通常在 DOMContentLoaded 事件之前执行。
- async：脚本加载完成后会立即执行，不论文档是否已解析完毕。如果脚本加载早于文档解析完毕，它将立即执行；如果文档解析早于脚本加载完成，脚本会在加载完成后立即执行。
依赖关系：
- defer：多个带有 defer 属性的脚本会按照它们在文档中的顺序依次执行，后面的脚本可以依赖前面的脚本。
- async：多个带有 async 属性的脚本之间没有依赖关系，它们的加载和执行顺序不确定。

综上所述，如果需要按照特定顺序加载和执行脚本并确保在文档解析完毕后执行，可以使用 defer 属性。而如果脚本之间没有依赖关系，可以并行加载和执行，并且在加载完成后立即执行，则可以使用 async 属性。

script ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
defer:浏览器指示脚本在文档被解析后执行，script被异步加载后并不会立刻执行，而是等待文档被解析完毕后执行。
async:同样是异步加载脚本，区别是脚本加载完毕后立即执行，这导致async属性下的脚本是乱序的，对于 script 有先后依赖关系的情况，并不适用

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的;绿色线代表 HTML 解析

关注