HTML 的 script 标签中 defer 和 async 的区别

defer 和 async 都英语控制脚本的加载和执行,都是一部加载外部的 JS 脚本文件,两者都不会阻塞 HTML 的解析。

绿色代表 HTML 解析,蓝色代表 JS 脚本网络加载时间,红色是 JS 脚本执行时间。

defer 会等 DOM 加载完之后才执行,async 则是脚本一直加载完就立即执行。

javascript 复制代码
<script src="lib.js" defer></script>
<script src="main.js" defer></script>

defer 使用场景主要是确保 DOM 完全加载和多个脚本相互依赖的情况,比如确保上述代码中两个脚本按顺序加载。虽然 js 本来就是从上往下执行,但加上 defer 更严谨,可以阻止页面渲染的阻塞、网络延迟、加载时间不同而导致执行顺序的改变。

async 的使用场景,比如想广告内容,不需要等整个页面加载好就跳出来,还有线上考试,网速慢导致试卷还没加载好,但计时器可能就已经开始计时了。

相关推荐
火星思想几秒前
Webpack热更新后模块生效的完整过程
前端·webpack·架构
月亮慢慢圆2 分钟前
监视器
前端
10年前端老司机4 分钟前
微信小程序自定义组件
前端·javascript·微信小程序
brzhang10 分钟前
实时通信的那些事儿:短轮询、长轮询、SSE 和 WebSocket 到底怎么选?
前端·后端·架构
玄魂15 分钟前
开源之夏2025-VisActor 社区题目及参赛者选/培介绍
前端·开源·资讯
camellia16 分钟前
SpringBoot(二十四)SpringBoot集成redis哨兵集群
java·前端·后端
YH丶浩19 分钟前
React 实现爱心花园动画
前端·react.js·前端框架
啵啵学习26 分钟前
浏览器插件,提示:此扩展程序未遵循 Chrome 扩展程序的最佳实践,因此已无法再使用
前端·chrome·浏览器·插件·破解
Mintopia32 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia33 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学