script标签默认阻塞HTML解析和渲染，async下载完立即执行，适合独立脚本；defer在DOM解析完成后、DOMContentLoaded前按序执行，适合依赖DOM的逻辑；type="module"默认类似defer，import()支持动态按需加载。
script 标签默认会阻塞 HTML 解析和渲染
浏览器遇到 <script> 标签时，会暂停 DOM 构建、停止页面渲染，直到脚本下载、解析、执行完成。这是最常被忽视的首屏卡顿根源——哪怕只是 10KB 的 analytics.js，也可能让白屏时间延长 300ms 以上。
关键判断：只要脚本没加 async 或 defer，且不在 </body> 前，它就一定阻塞。
- 内联脚本（
<script>console.log(1)</script>）立即执行，必然阻塞 - 外部脚本（
<script src="a.js"></script>）默认同步加载 + 同步执行 - 即使脚本内容为空或只含注释，HTTP 请求本身也会触发阻塞
async 和 defer 的行为差异必须分清
async 和 defer 都能解除 HTML 解析阻塞，但执行时机完全不同，选错会导致 JS 报错或功能失效。
-
async：下载不阻塞，下载完**立即执行**（可能在 DOM 尚未解析完时），适合完全独立的脚本（如广告、埋点） -
defer：下载不阻塞，执行推迟到**HTML 解析完成、DOMContentLoaded 触发前**，且按书写顺序执行，适合依赖 DOM 的初始化逻辑 - 多个
async脚本执行顺序不确定；多个defer脚本严格保序 -
async对内联脚本无效（浏览器忽略）；defer对内联脚本也无效（仅对外部脚本生效）
<!-- ✅ 正确：独立埋点脚本用 async -->
<script async src="ga.js"></script>
<p><!-- ✅ 正确：需操作 DOM 的主逻辑用 defer -->
<script defer src="app.js"></script></p><p><!-- ❌ 错误：defer 对内联脚本无意义 -->
<script defer>document.getElementById('main').innerHTML = 'ok';</script>现代方案：动态 import() 和 module 模式更可控
当需要按需加载、条件执行或避免全局污染时，async/defer 不够用。import() 动态导入和 type="module" 是更精细的替代方案。
立即学习“前端免费学习笔记（深入）”；
-
type="module"脚本默认行为类似defer（不阻塞解析、延迟执行、保序），且天然支持 ES 模块语法 -
import()返回 Promise，可在任意时机触发加载，适合路由级、组件级懒加载 - 注意：
type="module"脚本在旧版 IE 完全不执行（需降级 fallback） - CDN 上的模块脚本必须是 CORS 可访问的，否则会静默失败
<!-- 模块脚本自动 defer 行为 -->
<script type="module" src="main.mjs"></script>
<p><!-- 动态导入：点击后才加载 -->
<button onclick="loadChart()">显示图表</button>
<script>
async function loadChart() {
const { renderChart } = await import('./chart.js');
renderChart();
}
</script>容易被忽略的隐性阻塞点
除了 <script>，还有几个地方会悄悄拖慢首屏：
-
<link rel="stylesheet">本身不阻塞 HTML 解析，但会阻塞后续脚本的执行（浏览器等待 CSSOM 就绪） - 在
<head>中混写<script>和<link>时，脚本会等前面所有 CSS 下载完才开始下载 -
document.write()在现代页面中已禁用（Chrome 会直接报错），但某些老 SDK 仍可能触发兼容模式降级 - 第三方脚本（如客服 Widget）常使用同步加载方式，应优先要求其提供
async版本或封装成动态加载
真正影响用户体验的，往往不是脚本大小，而是它在哪一刻、以什么方式介入了渲染流水线。async/defer 是起点，不是终点；module/import() 是工具，不是银弹。关键在理清依赖链——哪个 JS 必须等 DOM？哪个可以晚点再跑？哪个根本不用现在加载？
