HTML4中script默认同步阻塞，HTML5新增async（下载完立即执行，顺序不确定）和defer（DOM解析后按序执行），二者仅对外部脚本生效，内联脚本忽略这些属性。
HTML4 时代 script 默认是同步阻塞的
浏览器解析 HTML 时，遇到 标签会立即下载并执行脚本，暂停 DOM 构建和后续资源加载。这意味着：script 的位置直接影响页面渲染时机，放在 里容易造成白屏。
- 即使脚本内容为空或只含
console.log，也会阻塞解析 - 多个
按顺序下载、执行，前一个不结束，后一个不开始 - 没有
async或defer属性时，行为在 HTML4 和 HTML5 中完全一致
HTML5 新增 async 和 defer，但语义不同
async 和 defer 是 HTML5 引入的布尔属性，仅对带 src 的外部脚本生效，且两者执行时机有本质区别：
-
async：下载不阻塞解析，下载完立即执行（可能中断 DOM 构建），执行顺序不确定，适合无依赖的独立脚本（如统计代码） -
defer：下载不阻塞解析，但执行被推迟到 DOM 解析完成、DOMContentLoaded触发前，且按出现顺序执行，适合操作 DOM 的初始化脚本 - 两者都忽略
document.write()，调用会直接被忽略（不报错但无效）
现代实践中最常踩的坑
开发者常误以为加了 async 就“安全”，或混淆 defer 与 DOMContentLoaded 的关系：
- 把依赖 jQuery 的脚本设为
async，而 jQuery 本身没加async—— 可能导致$ is not defined - 在
defer脚本里访问document.body是安全的，但访问document.getElementById('xxx')仍需确认对应元素已存在（因为defer不保证所有子资源加载完成） - 内联脚本（无
src）加async或defer会被浏览器忽略，属性无效
如何验证当前脚本实际加载行为
用 Chrome DevTools 的 Network 和 Rendering 面板可直观观察差异：
立即学习“前端免费学习笔记（深入）”；
Network → Filter: "script" → 查看 Initiator 列 → 若为 "Parser"，说明是同步阻塞加载 → 若为 "Other"，大概率是 async/defer 或动态插入
再配合 Performance 面板录制，关注 Parse HTML 和 Function Call 时间线重叠情况，就能确认是否真被推迟执行。
真正复杂的点不在属性本身，而在脚本之间的依赖链是否被显式声明；浏览器不会帮你 resolve 依赖，它只忠实地按规范执行加载策略。
