js的defer和async

街边吃垃圾

已于 2023-01-30 16:44:37 修改

阅读量110

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： script js

于 2022-08-15 16:29:40 首次发布

本文链接：https://blog.csdn.net/zhangjing0320/article/details/126349215

js 专栏收录该内容

99 篇文章

订阅专栏

本文详细介绍了HTML中<script>标签的执行对文档解析的影响。默认情况下，浏览器遇到<script>标签会阻塞文档解析，等待JS加载并执行。而使用defer属性，JS会在文档解析完成后执行；async属性则使JS异步加载，可能在文档解析完成前或后执行，不保证执行顺序。理解这些差异对于优化网页加载性能至关重要。

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

参考1：https://juejin.cn/post/6894629999215640583#comment
参考2：https://blog.csdn.net/mengduxiu/article/details/103338251

html文件都是按顺序执行的，script标签中没有加defer和async时，浏览器在解析文档时遇到script标签就会停止解析阻塞文档解析，先加载JS文件，加载完之后立即执行，执行完毕后才能继续解析文档。
而在script标签中写入defer或者async时，就会使JS文件异步加载，即html执行到script标签时，JS加载和文档解析同时进行，而async是在JS加载完成后立即执行JS脚本，阻塞文档解析，而defer则是JS加载完成后，在文档解析完成后执行JS脚本

结论：

script 标签	JS 执行顺序	是否阻塞解析 HTML
<script>	在 HTML 中的顺序	阻塞
<script async>	网络请求返回顺序	可能阻塞，也可能不阻塞
<script defer>	在 HTML 中的顺序	不阻塞