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

AC-PEACE2025-02-19 18:21

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