async属性仅对外部脚本（带src）生效，内联脚本添加无效；defer保证HTML顺序执行但不等待async脚本；动态插入script需先设src再append；DOMContentLoaded非绝对安全，应以document.readyState为准。
async 属性只对外部脚本生效，内联脚本加了也没用
很多人给 <script>console.log('hi')</script> 加 async，结果发现完全没变化——因为 async 对内联脚本无效，浏览器直接忽略。它只作用于带 src 的外部脚本。
常见错误现象：<script async>document.getElementById('app')</script> 仍会报 TypeError: Cannot read property 'getElementById' of null，不是属性没起作用，而是根本没被识别。
- ✅ 正确写法：
<script async src="analytics.js"></script> - ❌ 错误写法：
<script async>init();</script>或<script src="app.js" async="true"></script>（async是布尔属性，不接受值） - ⚠️ 注意：IE10 以下不支持
async，若需兼容旧环境，应避免依赖它
defer 脚本按 HTML 顺序执行，但不保证在所有 async 之后
把 lib.js 设为 defer、init.js 设为 async，不代表 init.js 一定等 lib.js 执行完再跑——async 脚本下载完就插队执行，defer 脚本则老老实实排队等 DOM 解析结束。两者调度机制互不感知。
典型报错：ReferenceError: $ is not defined，即使 <script defer src="jquery.js"></script> 写在前面，<script async src="plugin.js"></script> 仍可能抢先执行。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全做法：有依赖关系的脚本统一用
defer，并保持书写顺序 - ✅ 替代方案：改用
type="module"（默认行为等效defer，且支持静态分析和预加载） - ⚠️ 混用风险：一个页面里同时出现
async和defer，等于放弃执行时序控制权
动态插入 script 默认等效 async，但 onload 必须设在 src 之后
用 document.createElement('script') 创建脚本，不设 async 属性也默认异步下载，但执行时机取决于插入位置和浏览器实现——它更接近 async 而非 defer。
最常踩的坑是：先 appendChild，再赋 src。部分浏览器（尤其是旧版 Safari 和某些移动端 WebView）会同步执行，阻塞解析。
- ✅ 正确顺序：
s = document.createElement('script'); s.src = 'widget.js'; document.head.appendChild(s); - ❌ 危险顺序：
s = document.createElement('script'); document.head.appendChild(s); s.src = 'widget.js'; - ✅ 必须监听：
s.onload = () => initWidget(); s.onerror = () => console.error('load failed');，否则失败静默，极难定位 - ⚠️ CSP 限制：动态插入可能被
script-src策略拦截，需显式允许目标域名
DOMContentLoaded 不是安全边界，document.readyState 才是判断依据
很多脚本写 document.addEventListener('DOMContentLoaded', () => {...}) 就以为万无一失，但 async 脚本可能在该事件触发前就已执行完毕，而 DOM 还没解析到对应节点——比如 document.getElementById('header') 返回 null。
真正可靠的判断是检查 document.readyState：只有值为 'interactive' 或 'complete' 时，才能确认 DOM 已就绪；'loading' 表示还在解析中。
- ✅ 推荐写法：
if (document.readyState !== 'loading') init(); else document.addEventListener('DOMContentLoaded', init); - ✅ 更稳妥：
while (document.getElementById('target') === null) { /* 等待 */ }配合超时退出（仅限关键节点） - ⚠️ 注意：
defer脚本虽在DOMContentLoaded前执行，但不保证所有元素都已挂载（如custom-element可能延迟升级）
实际项目里最容易被忽略的，是脚本之间隐式的 DOM 依赖和执行时序耦合——哪怕用了 defer，如果某个脚本靠轮询或 MutationObserver 等待特定节点出现，而该节点由另一个异步模板引擎生成，依然会出问题。这类场景必须靠明确的信号机制（如自定义事件、Promise 链或状态标志）来协调，不能只靠加载属性。
