关键在加载方式而非位置：默认script会阻塞DOM解析，defer适合依赖DOM且有顺序的外部脚本，async仅适用于无依赖、不操作DOM的独立脚本。
<script></script> 放在 里不加 defer 或 async，首屏就大概率白屏；放在 前但没配对策略，交互就绪时间仍可能被拖慢。关键不在“放哪儿”，而在“怎么加载”。
为什么 <script></script> 默认会卡住页面渲染
浏览器解析 HTML 是流式进行的，遇到没有 defer 或 async 的 <script></script>，会立刻中断 DOM 构建，发起网络请求（如果是外部脚本），等下载、解析、执行全部完成才继续。哪怕只是一行 console.log，只要它在 里且没加属性，就会让 里的文字、按钮、图片全等它。
常见现象包括：
- 页面顶部有
<script src="polyfill.js"></script>，但内容迟迟不显示 - 开发者工具 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脚本放在底部，结果它比document.querySelector('header')返回null - 两个
async脚本，A 依赖 B，但 A 下载更快，导致ReferenceError - 在
async脚本里调用document.write()—— 页面直接清空
type="module" 和动态 import() 不是替代方案，而是升级路径
type="module" 不仅自带 defer，还启用 ES 模块作用域、支持 top-level await、静态分析导入关系。但它默认不兼容 IE，且所有 import 路径必须带扩展名或协议（import { foo } from './utils.js'）。
而真正解决“按需加载”的，不是位置或属性，是运行时逻辑：
- 点击按钮才需要图表库？用
import('chart.js').then(...) - 某个区域滚动进视口才加载组件？配合
IntersectionObserver+import() - 服务端渲染场景下，避免重复执行？检查
window.__INITIALIZED__标志位再import()
这些没法靠挪动 <script></script> 标签解决，得写代码判断时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
