async和defer到底该怎么用才能优化首屏加载？ 皇甫彬丽 提问于 2026-02-14 13:30:24 阅读 78 优化 最近在优化页面加载速度，把两个JS文件分别用了async和defer，但页面还是感觉卡顿。比如这个代码： <script src="main.js" defer></script> <script src="analytics.js" async></script> 发现defer的main.js执行完了才渲染页面，async的analytics.js倒是没阻塞，但总感觉顺序有问题。如果两个脚本都没依赖关系，该怎么选才能让首屏更快？ 首屏优化 我来解答 赞 7 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 2 条解答 UX红梅 Lv1 这个问题其实挺常见的，我们来拆解下。首先明确几个关键点： 1. defer的脚本会在DOM解析完成后按顺序执行，也就是在DOMContentLoaded之前 2. async的脚本下载完就立即执行，完全不关心顺序 3. 首屏渲染最关键的是DOM构建完成 根据你的情况，main.js用了defer，这个选择没错，因为它会等待DOM。问题可能出在analytics.js上，虽然用了async，但如果这个文件很大或者服务器响应慢，它可能会在关键渲染路径上抢带宽。 我的建议是： 1. 对于真正不关键的脚本（比如统计、广告），不仅要加async，最好再加个preload： <link rel="preload" href="analytics.js" as="script"> <script src="analytics.js" async></script> 2. 如果main.js体积很大，考虑拆分出首屏必须的部分，非关键功能动态加载 3. 用Chrome DevTools的Lighthouse跑下，看具体是哪块拖慢了渲染 另外说个经验之谈，很多人以为用了async/defer就万事大吉了，其实脚本本身的执行时间也很关键。我有次优化就是把一个jQuery插件改成了按需加载，首屏直接快了1秒多。 回复 点赞 2026-03-09 19:16 程序员红彦 Lv1 你这种情况，两个脚本都没依赖关系的话，都用 async 就行了。没必要用 defer，因为 defer 会等到 DOM 解析完才执行，反而拖慢首屏渲染。像这样改： <script src="main.js" async></script> <script src="analytics.js" async></script> 我之前也遇到过类似的问题，async 的脚本加载是并行的，谁先加载完谁先执行，完全不阻塞渲染，特别适合这种独立的统计或功能脚本。如果你非得保证 main.js 在某些场景下优先执行，那就把它放前面就行，但依然用 async。别想太复杂，浏览器优化得很好。 回复 点赞 6 2026-02-14 15:01 加载更多 相关推荐
1. defer的脚本会在DOM解析完成后按顺序执行，也就是在DOMContentLoaded之前
2. async的脚本下载完就立即执行，完全不关心顺序
3. 首屏渲染最关键的是DOM构建完成
根据你的情况，main.js用了defer，这个选择没错，因为它会等待DOM。问题可能出在analytics.js上，虽然用了async，但如果这个文件很大或者服务器响应慢，它可能会在关键渲染路径上抢带宽。
我的建议是：
1. 对于真正不关键的脚本（比如统计、广告），不仅要加async，最好再加个preload：
2. 如果main.js体积很大，考虑拆分出首屏必须的部分，非关键功能动态加载
3. 用Chrome DevTools的Lighthouse跑下，看具体是哪块拖慢了渲染
另外说个经验之谈，很多人以为用了async/defer就万事大吉了，其实脚本本身的执行时间也很关键。我有次优化就是把一个jQuery插件改成了按需加载，首屏直接快了1秒多。
<script src="main.js" async></script>
<script src="analytics.js" async></script>
我之前也遇到过类似的问题，async 的脚本加载是并行的，谁先加载完谁先执行，完全不阻塞渲染，特别适合这种独立的统计或功能脚本。如果你非得保证 main.js 在某些场景下优先执行，那就把它放前面就行，但依然用 async。别想太复杂，浏览器优化得很好。