HTML5通过async和defer属性优化脚本加载：async适用于独立脚本（如统计代码），下载不阻塞解析但执行时机不确定；defer适用于依赖DOM的脚本（如轮播图），按顺序在DOM解析后执行；二者均不解决图片压缩、CSS阻塞等其他性能问题。
HTML5 本身不直接“提升加载速度”，但提供了 async 和 defer 这两个关键属性，让脚本加载和执行不再阻塞 HTML 解析与页面渲染——这是最直接、最有效的首屏加速手段之一。
什么时候该用 async？
适用于完全独立、不依赖其他脚本、也不被其他脚本依赖的 JS，比如统计代码、广告 SDK、第三方埋点。
-
async脚本下载时不阻塞 HTML 解析，但一旦下载完成就立即执行（可能打断解析） - 多个
async脚本的执行顺序不确定，不能保证先后 - 不要在
async脚本里操作尚未生成的 DOM 元素（比如document.getElementById可能返回null）
<script async src="https://cdn.example.com/analytics.js"></script>
什么时候该用 defer？
适用于需要操作 DOM、又依赖 HTML 结构的脚本，比如初始化导航菜单、轮播图、表单验证等。
-
defer脚本下载时不阻塞解析，且一定会等到 HTML 解析完成（DOMContentLoaded前）才按顺序执行 - 多个
defer脚本保持书写顺序执行，适合有依赖关系的模块 - 只对
src外链脚本生效；内联脚本加defer会被忽略
<script defer src="js/main.js"></script> <script defer src="js/utils.js"></script>
为什么不能只靠 async 或 defer？
它们解决的是“脚本阻塞渲染”问题，但网页加载慢还常源于：未压缩的图片、未启用 Gzip/Brotli、过多重定向、未预连接关键域名、CSS 文件过大导致 FOUC 或阻塞渲染树构建。
立即学习“前端免费学习笔记（深入）”；
-
async/defer对<link rel="stylesheet">无效，CSS 仍会阻塞渲染，需配合media属性或preload - 如果脚本体积大（>100KB），即使异步，下载耗时也影响交互时间，应考虑代码分割或懒加载
- 服务端开启 HTTP/2 或 HTTP/3 后，并行加载能力增强，
async的收益会略降，但执行时机控制依然不可替代
真正卡住用户眼睛的，往往不是“整个页面没出来”，而是“内容区域空白几秒”。把 async 用在无依赖脚本上，把 defer 用在 DOM 操作脚本上，再配合资源优先级提示（如 rel="preload"），才是 HTML5 级别的务实加速。
