async 和 defer 到底该怎么用才不影响首屏加载？

async 只是不阻塞下载，下载完就立刻执行，执行时还是会卡住渲染。

第三方统计脚本用 defer 就行，会等到 HTML 解析完再执行，不阻塞首屏：

如果页面顶部已经有其他阻塞脚本，把这个 defer 脚本放到底部 前更稳。

这个问题我也踩过坑，async和defer的差异确实容易搞混。先说结论：第三方统计脚本最好用defer而不是async，原因我慢慢解释。

首先澄清下概念：
- async是下载不阻塞HTML解析，但执行时会阻塞渲染
- defer是下载和执行都等到HTML解析完才进行

你遇到的阻塞问题就是因为统计脚本用了async，当它下载完时会立即执行，这时候如果执行时间长就会卡住页面。改成这样就好：

<script src="analytics.js" defer></script>

安全提醒：如果是第三方脚本，一定要考虑注入风险。建议加上crossorigin="anonymous"防止注入，像这样：

<script src="analytics.js" defer crossorigin="anonymous"></script>

实际项目中我都是这样处理的：
1. 关键渲染路径的脚本用defer
2. 完全不重要的第三方脚本用async（比如广告）
3. 统计类这种中等重要性的脚本也用defer

Lighthouse那个提示是因为它把任何脚本都算作阻塞资源，即使用defer也会提示，但实际对首屏影响很小。