本文详细介绍了JavaScript中script标签的defer和async属性，通过理论知识和硬核测试，展示了它们对脚本加载和执行的影响。defer保证脚本在DOM解析完成后执行，而async则在脚本加载完后立即执行，不保证执行顺序。对于有依赖性的脚本，推荐使用defer，而对于独立的脚本，async可能是更好的选择。
先来看看理论知识：
-
<script src="script.js"></script>没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即” 指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
-
<script async src="script.js"></script>有 async，加载和渲染后续文档元素的过程将和 script.js 的加载并行进行（异步），但是执行是会阻塞的（同步）。
-
<script defer src="myscript.js"></script>有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
图示：
以上出处来自思否：出处
以上理论可能还不直观，马上硬核测试：
html如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=
最低0.47元/天 解锁文章
51万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
