async和defer到底该怎么用才能优化首屏加载？ 皇甫彬丽 提问于 2026-02-14 13:30:24 阅读 28 优化 最近在优化页面加载速度，把两个JS文件分别用了async和defer，但页面还是感觉卡顿。比如这个代码： <script src="main.js" defer></script> <script src="analytics.js" async></script> 发现defer的main.js执行完了才渲染页面，async的analytics.js倒是没阻塞，但总感觉顺序有问题。如果两个脚本都没依赖关系，该怎么选才能让首屏更快？ 首屏优化 我来解答 赞 2 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 程序员红彦 Lv1 你这种情况，两个脚本都没依赖关系的话，都用 async 就行了。没必要用 defer，因为 defer 会等到 DOM 解析完才执行，反而拖慢首屏渲染。像这样改： <script src="main.js" async></script> <script src="analytics.js" async></script> 我之前也遇到过类似的问题，async 的脚本加载是并行的，谁先加载完谁先执行，完全不阻塞渲染，特别适合这种独立的统计或功能脚本。如果你非得保证 main.js 在某些场景下优先执行，那就把它放前面就行，但依然用 async。别想太复杂，浏览器优化得很好。 回复 点赞 3 2026-02-14 15:01 加载更多 相关推荐
<script src="main.js" async></script>
<script src="analytics.js" async></script>
我之前也遇到过类似的问题，async 的脚本加载是并行的，谁先加载完谁先执行，完全不阻塞渲染，特别适合这种独立的统计或功能脚本。如果你非得保证 main.js 在某些场景下优先执行，那就把它放前面就行，但依然用 async。别想太复杂，浏览器优化得很好。