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

相关推荐
Hilaku11 分钟前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明14 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
Danny_FD27 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
gnip32 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济38 分钟前
后端程序员的CSS复习
前端
Enddme40 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员42 分钟前
微信小程序使用 Tailwind CSS version 3
前端
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427111 小时前
Canvas之图像合成
前端·javascript·canvas
每天开心1 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架