首屏白屏时间翻倍主因是未加async或defer的<script>阻塞HTML解析，导致DOM构建中断、CSSOM无法合成，页面无法绘制；常见现象包括getElementById返回null、首屏图延迟出现、index.html Finish时间远超TTFB。
普通<script>为什么让首屏白屏时间翻倍</script>
因为浏览器遇到没加async或defer的<script>，会立刻暂停 HTML 解析、下载脚本、执行完才继续——DOM 树卡在半截，CSSOM 没法构建，页面一帧都画不出来。
常见错误现象：
– document.getElementById("header")返回null，不是元素不存在，是它根本还没被解析到
– 首屏大图写在<body>顶部，但<script src="analytics.js">放在<head>里，结果图等了 1.2 秒才出现
– DevTools Network 面板里，index.html的“Finish”时间远晚于 TTFB，说明 JS 下载执行拖住了整个 HTML 流程
实操建议：
– 所有非关键脚本（统计、广告、客服 SDK）必须加async或defer
– 内联脚本若操作 DOM，要么放目标元素之后，要么包在document.addEventListener('DOMContentLoaded', ...)里
– 别信“我只加载 5KB 的 JS 就没事”——哪怕 1KB 同步脚本，在弱网下也可能阻塞 800ms+
defer 脚本真不阻塞解析？但有个隐藏前提
defer确实让下载与 HTML 解析并行，但它执行前必须等两件事完成：一是整个 HTML 解析完毕，二是所有关键 CSS（即没带media限制或media="all"的<link rel="stylesheet">）的 CSSOM 构建完成。
立即学习“前端免费学习笔记（深入）”；
这意味着：
– 如果main.css体积大（>200KB）或服务器响应慢，DOMContentLoaded会被拖住，即使app.js早就下完了也得干等
– 多个defer脚本按书写顺序执行，但a.js里console.log('a')和b.js里console.log('b')输出顺序，取决于它们在 HTML 中的声明顺序，跟下载快慢无关
– <script defer>console.log('inline')这种内联写法无效，defer只对外链脚本起作用
使用场景：
– 主业务逻辑（如初始化 Vue 实例、绑定全局事件）
– 有强依赖关系的脚本链（utils.js → api.js → app.js）
– 不想手动监听DOMContentLoaded，又需要完整 DOM 的场合
async 脚本谁先执行谁说了算，DOM 访问容易报错
async脚本下载时不影响 HTML 解析，但一旦下载完成，浏览器会立刻中断当前解析、执行它——不管 DOM 建到哪了，也不管其他脚本还在不在下载中。
典型问题：
– <script async src="tracker.js"></script>在<h1>首页</h1>之前就执行，document.querySelector('h1')返回null
– 两个async脚本，lib.js比app.js晚下完，但app.js先执行，结果报ReferenceError: $ is not defined
– 在 Safari 15.4 以下，async脚本可能在load事件后才执行，导致监听失效
实操建议：
– 只用于完全独立、不操作 DOM、不依赖其他脚本的代码（如 Google Analytics、微信 JS-SDK 初始化）
– 若必须操作 DOM，加一层检测：if (document.body) { init() } else { document.addEventListener('DOMContentLoaded', init) }
– 绝对不要用document.write()，现代浏览器执行即清空文档流，不可逆
type="module" 默认 defer，但加载规则更严格
<script type="module" src="main.mjs"></script>的行为类似defer：并行下载、DOM 解析完成后执行、保证顺序。但它额外要求：
– 自动启用 CORS 请求，所以跨域模块必须配Access-Control-Allow-Origin
– 不支持nomodule回退脚本里用document.write()
– 顶层await合法，但会阻塞后续模块执行（不是阻塞 DOM，是阻塞同级模块链）
性能影响：
– 模块解析比传统脚本慢约 10–15%，因要构建模块图、做静态分析
– 但支持原生import.meta.url和动态import()，利于代码拆分和按需加载
– 若你用 Webpack/Vite，生成的type="module"入口其实已隐式处理了这些细节，直接用即可
容易被忽略的点：
– <script type="module">和<script nomodule>不能混用同一份逻辑，后者不会识别 ES Module 语法
– 想兼容老浏览器？别只靠nomodule，检查import是否真的没被执行（有些 polyfill 会漏掉动态导入）
– 服务端渲染（SSR）时，import()的 chunk 加载时机和 hydrate 顺序要对齐，否则首屏闪动
