内联脚本加 async 属性无效，仍同步执行并阻塞 html 解析；async 仅对带 src 的外部脚本生效，且预扫描线程只识别静态路径，http/2 推送需配合 preload 才能提前加载。
内联脚本加 async 属性根本无效，浏览器直接忽略
HTML 解析器在预扫描（preload scanner）阶段会识别 <script async></script>，但仅对带 src 的外部脚本生效。内联脚本如 <script async>console.log('hi');</script> 中的 async 属性会被完全忽略，脚本仍同步执行——也就是立刻阻塞 HTML 解析、立即运行。
常见错误现象：Uncaught TypeError: Cannot read property 'querySelector' of null，你以为加了 async 就“异步”了，结果它还是在 里就执行，DOM 连 都没开始建。
- 内联脚本永远不支持
async或defer，这是规范硬限制，不是浏览器 bug - 想让内联逻辑“不阻塞”，唯一办法是把它包装成事件监听或延迟调用，比如
setTimeout(() => { ... }, 0)或requestIdleCallback() - 服务端渲染（SSR）中注入的初始化数据（如
window.__INITIAL_STATE__）必须出现在所有脚本之前，且不能包裹在内联async标签里——否则可能被跳过或执行错乱
预扫描线程如何识别并提前下载 async 脚本
当 HTML 解析器遇到 <script async src="app.js"></script>，主线程继续解析，而预扫描线程会立即提取 src 地址，发起 HTTP 请求下载脚本。这个过程不等待 DOM 构建，也不触发 DOMContentLoaded 监听。
但注意：HTTP/2 推送的脚本不会被预扫描线程发现，async 属性在此类场景下形同虚设；必须搭配 <link rel="preload" href="app.js" as="script"> 显式声明，才能确保提前加载。
- 预扫描只识别静态
src值，动态拼接的路径（如src="bundle." + version + ".js"）无法被提前抓取 -
type="module"脚本即使写了async，也会被忽略——它的默认行为就是类似defer，且不支持真正意义上的 async 执行 - 如果脚本用了
document.write()，无论是否加async或defer，浏览器都会拒绝执行并清空当前文档
async 脚本执行时 document.readyState 可能是 loading 或 interactive
async 脚本下载完就执行，此时 document.readyState 可能仍是 "loading"（DOM 解析中途），也可能是 "interactive"（HTML 解析完成但资源未加载完）。它绝不会等到 "complete"。
所以你在 async 脚本里写 document.getElementById('main')，失败不是偶然，而是大概率事件——除非目标元素已在该脚本标签之前出现，且已解析完毕。
- 简单兜底写法：
if (document.getElementById('main')) { init(); }，但不要依赖多次轮询 - 更稳妥的做法是检查
document.readyState：if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init); else init(); - 别在
async脚本里监听DOMContentLoaded后再操作 DOM——这等于自己造了个defer，不如直接换用defer
混用 async 和 defer 时，预扫描与执行队列彻底脱钩
预扫描线程会为所有 async 和 defer 脚本发起下载，但它们进入执行队列的时机完全不同：async 下载完即入宏任务队列；defer 则统一等到 DOMContentLoaded 触发前，按 HTML 顺序批量入队。
结果就是：一个页面里同时有 <script async src="tracker.js"></script> 和 <script defer src="app.js"></script>，tracker.js 可能在 app.js 开始下载前就执行完了，也可能在 app.js 执行一半时插进来——两者毫无调度协同。
- Webpack/Vite 打包出的入口文件（如
main.js）只要依赖 DOM 或其他模块，就必须用defer，哪怕体积很小 - 第三方 SDK 文档没明确说“支持 async 加载”，就别加——
clipboard.min.js、moment.js等都属于典型反例 - 真实项目中最容易被忽略的是：你把统计脚本放
加async，业务脚本放底部加defer，结果统计脚本反而比业务逻辑早几毫秒访问了未挂载的#app节点
src、async、defer 这几个字面量。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
