不能用async加载有依赖关系的脚本，因其下载完立即执行、不保序且不等DOM就绪；defer则按HTML顺序在DOM解析完成后执行，是依赖场景的唯一安全选择。
不能用 async 加载有依赖关系的脚本——这是页面报错的根本原因，不是加载慢，是执行时机和顺序全乱了。
为什么 async 一加就报 ReferenceError: XXX is not defined
async 脚本下载完立刻执行，完全不等 DOM 解析完成，也不管其他脚本是否就绪。比如你写了：
<script src="lodash.js" async></script><br><script src="app.js" async></script>
哪怕 lodash.js 文件更小、先下完，app.js 也可能先执行——因为浏览器只看“谁先下载完”，不看 HTML 里谁在前。一旦 app.js 里用了 _.debounce，而此时 lodash.js 还没执行（甚至还没下完），错误就必然发生。
- 多个
async脚本之间无任何执行顺序保障 -
document.getElementById返回null不是因为 DOM 没渲染，而是脚本执行时<body>可能都还没解析到一半 - 第三方 SDK（如微信 JS-SDK）若被设为
async，常因window.wx未挂载就调用wx.config而直接失败
defer 是多依赖脚本的默认安全选项
如果你的脚本要操作 DOM、调用其他脚本导出的变量、或本身被后续脚本依赖，defer 是唯一能保序且保 DOM 就绪的方案。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 所有带
src的defer脚本，严格按 HTML 中出现顺序执行，与下载快慢无关 - 执行时机固定在 HTML 解析完成之后、
DOMContentLoaded触发之前，DOM 树完整可用 - 必须把依赖项写在前面：
<script src="utils.js" defer></script>必须出现在<script src="main.js" defer></script>之前 -
defer对内联脚本（无src）无效，<script defer>console.log(1)</script>中的defer被浏览器忽略
混用 async 和 defer 的坑
如果一个脚本同时写了 async 和 defer，现代浏览器会直接忽略 defer，按 async 行为执行——这不是兼容性问题，是明确规范行为。
- 别指望“加两个属性保险一点”，它只会让你更难 debug
- 构建工具自动注入 polyfill（如
core-js）时，若插在你手动写的defer脚本前面，就会破坏你预设的依赖链 -
type="module"脚本天然具备defer行为，再加defer属冗余，部分打包器可能误判依赖 - 混着写
<script src="legacy.js" defer></script>和<script type="module" src="new.js"></script>，两者不在同一执行队列，别让它们互相等待
真正独立的脚本才配用 async
只有满足全部以下条件，才能放心用 async：
- 不读写 DOM（不用
document.querySelector、getElementById等） - 不依赖其他 JS 导出的变量或函数（不调
jQuery、monaco、Vue） - 自身也不被其他脚本依赖（没人 import 它、require 它、或靠它挂全局变量）
- 执行失败不影响主逻辑（比如上报错误的
error-tracker.js）
典型例子：analytics.js、ad-banner.js、sentry.min.js。其余一律走 defer，别侥幸。
最容易被忽略的是：跨域脚本（如 CDN 上的 monaco-editor）必须配 crossorigin="anonymous"，否则 Chrome 里看不到真实错误堆栈，你连报什么错都得靠猜。
