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 文件完全无效，<link rel="stylesheet">依然会阻塞渲染树构建，大 CSS 文件照样拖慢首屏 - 图片没压缩、没转 WebP、没配
loading="lazy"，再好的脚本加载策略也救不了滚动卡顿 - 脚本体积超过 150 KB，即使
async，光下载就要几百毫秒，用户感知仍是“页面反应慢” - 服务端没开 HTTP/2 或 Brotli 压缩，多个小 JS 并行下载效率低，
async的优势反而被网络层抵消
真正容易被忽略的是：你加了 async，但脚本里又动态 import() 了一个 500 KB 的模块——这个动态导入仍会阻塞主线程，且无法被 async 属性控制。
