async适用于完全独立、无DOM依赖、不被其他脚本依赖的脚本，如统计埋点、广告SDK、A/B测试工具；其下载不阻塞HTML解析，但执行时机不可控，可能早于DOM就绪，且多个async脚本执行顺序不确定。

直接放 里、不加任何属性的 <script></script>，基本等于给页面“踩刹车”——解析停、渲染卡、首屏白屏时间拉长。关键不是“要不要异步”，而是“哪类脚本该用哪种异步方式”。

async 属性适合哪些脚本？

只适用于完全独立、无依赖、也不被依赖的脚本，比如统计埋点、广告 SDK、A/B 测试工具。

• async 下载时不阻塞 HTML 解析，但一旦下载完成就立刻执行，可能发生在 DOMContentLoaded 之前、甚至 DOM 还没建完时
• 多个 async 脚本执行顺序不确定，script1.js 和 script2.js 谁先下载完谁先跑，不能靠书写顺序保证依赖
• 别在 async 脚本里调用 document.getElementById 或操作尚未生成的元素，大概率返回 null
• 内联脚本（即没有 src 的 <script>console.log(1)</script>）加 async 无效

示例：<script async src="https://cdn.example.com/analytics.js"></script>

defer 属性更适合 DOM 操作类脚本

凡是要等页面结构 ready 后才能运行的逻辑，比如轮播图初始化、表单验证绑定、导航菜单展开，都该用 defer。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

• defer 脚本下载时不阻塞解析，且一定等到整个 HTML 解析完成（DOM 构建完毕）、但在 DOMContentLoaded 事件触发前按顺序执行
• 多个 defer 脚本严格按它们在 HTML 中出现的顺序执行，适合有先后依赖的模块链
• 只对外部脚本（带 src）生效；defer 对内联脚本会被浏览器忽略
• 如果脚本本身很小（ 底部，但不如 defer 可控

示例：<script defer src="js/main.js"></script>

别把 async/defer 当万能药

它们只解决“JS 阻塞解析”这一个问题，但页面卡顿往往还有更隐蔽的源头：

• async 和 defer 对 CSS 文件完全无效， 依然会阻塞渲染树构建，大 CSS 文件照样拖慢首屏
• 图片没压缩、没转 WebP、没配 loading="lazy"，再好的脚本加载策略也救不了滚动卡顿
• 脚本体积超过 150 KB，即使 async，光下载就要几百毫秒，用户感知仍是“页面反应慢”
• 服务端没开 HTTP/2 或 Brotli 压缩，多个小 JS 并行下载效率低，async 的优势反而被网络层抵消

真正容易被忽略的是：你加了 async，但脚本里又动态 import() 了一个 500 KB 的模块——这个动态导入仍会阻塞主线程，且无法被 async 属性控制。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！