本质是加载策略匹配：不加defer或async的script放head必致白屏；defer适合依赖dom且需顺序执行的业务脚本；async仅适用于完全独立的脚本如统计代码。
script 标签放哪儿，本质不是位置问题，而是加载策略是否匹配脚本行为。不加 defer 或 async 的 <script></script> 放在 里，首屏白屏几乎是确定的。
为什么默认 script 会卡住页面渲染
浏览器解析 HTML 是流式的，遇到没加 defer 或 async 的 <script src="app.js"></script>，会立刻暂停 DOM 构建，发起请求、下载、解析、执行全部完成才继续。哪怕 app.js 只有一行 console.log('hi')， 里的文字、按钮、图片也得等它。
常见现象包括：
- 页面顶部有
<script src="polyfill.js"></script>，但<main></main>内容迟迟不显示 - Chrome DevTools Network 面板里，
DOMContentLoaded时间远晚于first-contentful-paint - 移动端弱网下，用户点击按钮无响应，控制台报
document.getElementById() is null
defer 适合哪些脚本：DOM 操作 + 顺序依赖
defer 脚本会并行下载、不阻塞解析，且严格按 HTML 中出现顺序，在 DOM 构建完成后、DOMContentLoaded 触发前执行。它天然适配主业务逻辑。
使用条件：
- 必须是外部脚本（带
src属性）；内联脚本加defer会被忽略 - 脚本需操作完整 DOM，比如绑定事件、初始化 UI 组件、读取
data-属性 - 多个脚本之间有依赖，例如
utils.js必须在app.js之前执行 - 不需要立即执行（比如首屏动画不需要等整个 DOM 就启动）
示例写法：<script src="vendor.js" defer></script>、<script type="module" src="app.mjs"></script>（type="module" 默认带 defer 行为）
async 用错就报错：独立脚本才敢开
async 脚本下载不阻塞，但一旦下载完成，会立刻暂停 HTML 解析并执行——此时 DOM 可能只解析了一半。它根本不关心 DOM 是否就绪，也不管其他脚本有没有加载完。
只适用于：
- 完全不操作 DOM 的脚本，如
analytics.js、ads.js - 不依赖任何其他 JS 文件，也不被其他 JS 依赖
- 执行时机无所谓，失败也不影响主功能
容易踩的坑：
- 把
async脚本放在底部，结果它比<header></header>还早执行，document.querySelector('header')返回null - 两个
async脚本，A 依赖 B，但 A 下载更快，导致ReferenceError - 在
async脚本里调用document.write()—— 页面直接清空
放
仅把 <script src="app.js"></script> 放到 前，虽能避免阻塞 DOM 构建，但仍有风险：如果 JS 文件体积大或网络慢，DOMContentLoaded 事件仍会被延迟触发，影响交互就绪时间。
更稳妥的做法是保留底部位置，同时显式声明加载策略：
- 用
defer：保证执行时机和顺序，适合主逻辑 - 用
type="module"：自带defer，还支持顶层await和静态导入分析 - 避免混用：
async脚本不应放在底部——它会跳过顺序约束，可能比 DOM 构建还早执行
真正容易被忽略的是：defer 保证 DOM 就绪，但不保证资源就绪。比如你 defer 加载了一个模型文件（.json 或 .bin），脚本执行时文件可能还没 fetch 完，后续逻辑照样出错。这类问题得靠运行时控制，比如 import() 动态导入 + try/catch。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
