script标签中的 defer 和 async 属性

最新推荐文章于 2025-03-28 10:07:58 发布

前端菜鸡小卒

最新推荐文章于 2025-03-28 10:07:58 发布

阅读量444

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： defer和async script标签的defer和async 异步加载方式

本文链接：https://blog.youkuaiyun.com/qq_30376375/article/details/96510759

JS 专栏收录该内容

7 篇文章

订阅专栏

本文解析了HTML中script标签的async与defer属性的作用及区别。详细介绍了这两种属性如何影响脚本的下载与执行时机，帮助开发者更好地优化网页加载性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="myscript.js"></script>   // 没有defer和async属性时

<script src="myscript.js" defer></script>   // 有defer属性时

<script src="myscript.js" async></script>  // 有async属性时

<script src="myscript.js" async defer></script>  // 有async,defer属性时或者defer,async属性时

一、当script没有defer和async属性时

如果两个属性都没有（默认行为），脚本的下载和执行将会按照文档的先后顺序同步进行。当脚本下载和执行的时候，文档解析就会被阻塞，在脚本下载和执行完成之后文档才能往下继续进行解析。总之脚本的下载和执行都是按照文档的先后顺序进行。

二、当script 有defer属性时(等到文档解析完才开始执行)

defer 属性表示脚本按顺序被解析到时就开始下载，下载过程中文档继续进行解析，当文档全部解析完成之后便开始执行下载好的脚本，这相当于在 DOMContentLoaded 的监听事件内进行执行。虽然 defer 属性的脚本需要等到文档解析完才开始执行，但其执行是有顺序的(异步加载资源，在DOM渲染后之后再按顺序执行JS)。

三、当script 有async属性时(脚本下载完成后停止HTML解析，执行脚本，脚本解析完继续HTML解析)

async 属性表示脚本按顺序被解析到时就开始下载，下载过程中文档继续进行解析，当脚本下载完成后文档停止解析开始执行下载好的脚本，脚本执行完后继续解析文档。async 脚本由于网络等的影响将不会按照顺序执行(异步加载资源，且加载完JS资源立即执行，并不会按顺序，谁快谁先上)。

四、当script同时有async和defer属性时(执行效果和async一致)

执行效果和async一致，把这两个属性交换一下位置，看会不会有覆盖效果，结果发现也是和async一致的

综上，在webkit引擎下，建议的方式仍然是把<script>写在<body>底部，如果需要使用百度谷歌分析或者不蒜子等独立库时可以使用async属性，若你的<script>标签必须写在<head>头部内可以使用defer属性

使用场景：

1.把带 defer 属性的脚本放在 <head> 中比无属性的脚本放在 </body> 之前要更好，因为浏览器在页面解析时可对带 defer 属性的脚本进行下载。
3.如果脚本相互依赖，请使用 defer。
4.如果脚本是独立的，请使用 async。
5.如果 DOM 必须解析好才执行且执行函数没有放在 DOMContentLoaded 的监听器中，请使用 defer。