放错位置是首屏白屏主因：未加async或defer时，浏览器会暂停DOM构建，等待下载、编译、执行完才继续，即使脚本仅1KB，网络延迟或执行卡顿也会拖慢首屏数百毫秒。
<script></script> 放错位置是首屏白屏最常见原因，不是脚本大，而是它让浏览器停在半路不动。
为什么默认 <script src="a.js"></script> 会卡住整个页面
浏览器解析 HTML 是流式自上而下进行的。遇到没加 async 或 defer 的外部 <script></script>，会立刻暂停 DOM 构建，等下载、编译、执行完才继续——哪怕脚本只有 1KB，网络延迟或执行卡顿都会拖慢首屏几百毫秒。
- 写在
里？整个内容都得排队等它 - 内联脚本（
<script>console.log(1)</script>）也默认阻塞，除非你确认它只做极轻量初始化（如设置window.__INIT__） -
document.write()在现代浏览器中已废弃，执行即清空文档流，本地开发尤其容易翻车
async 和 defer 到底该选哪个
关键看脚本是否依赖 DOM 或其他脚本：
- 完全不依赖 DOM、也不依赖其他 JS（如统计埋点、广告 SDK）：用
async。下载不阻塞，但执行时机不可控，可能早于DOMContentLoaded，也可能晚于 - 依赖 DOM 结构、或需按顺序执行（如主业务逻辑、轮播图初始化）：用
defer。下载并行，执行严格在 DOM 解析完成后、DOMContentLoaded前，且按 HTML 中书写顺序 - 别混用：一个
<script defer></script>后面跟一个<script async></script>，执行顺序就不可预测了
第三方脚本怎么安全加载不拖累首屏
很多 SDK 不提供 defer 支持，硬加可能出错；又不能让它卡在 里：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 优先用
<iframe sandbox="allow-scripts"></iframe>沙箱化加载，隔离执行环境，避免污染主页面全局作用域 - 若必须同步注入（如某些 A/B 测试工具），确保它体积极小、无网络请求，且放在
最底部 - 检查是否真的需要「立即加载」：有些统计脚本其实可以等
visibilitychange事件触发后再加载
别把 defer 当万能膏药，这些细节决定成败
defer 能解决大部分问题，但几个边界情况容易被忽略：
-
<script defer></script>只对**外部脚本**生效，内联脚本加了也无效 - 多个
defer脚本之间有依赖时，必须严格按 HTML 顺序书写，否则执行顺序错乱 - SSR 渲染的页面里，JS 动态插入的
<script></script>默认是同步行为，不会继承父级的defer属性 - 构建工具（如 Vite、Webpack）生成的代码若已自动加
defer，再手动加一层反而可能冲突
真正卡住页面的往往不是 JS 体积，而是浏览器解析 HTML 时那一瞬间的停顿——盯住 <script></script> 出现的位置和属性，比压缩几 KB 更有效。
