HTML和HTML5脚本加载机制有别吗_异步执行差异【研究】

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 依赖，它只忠实地按规范执行加载策略。