必须放在内且靠前，否则会导致fouc、旧版浏览器忽略或样式静默失效；其阻塞行为在中属预期设计，在中则破坏渲染流水线。
link rel="stylesheet" 必须放在 里，且要靠前；script 标签加不加 defer 或 async，比它放哪儿更重要。
为什么 link rel="stylesheet" 不能塞进
浏览器是流式解析 HTML 的，遇到 link rel="stylesheet" 就会暂停 HTML 解析，去拉 CSS、构建 CSSOM，等它就绪才继续。这个阻塞行为只在 里是“预期之内”的；一旦丢进 ，就会导致：页面已开始渲染文字或图片，突然卡住重排，出现闪动；旧版 Safari 直接忽略，样式彻底失效。
常见错误现象：<link rel="stylesheet" href="main.css"> 看似“不影响 head”，实则破坏渲染流水线。
- ✅ 正确写法：放在
内，<meta charset>之后、<title></title>之前或之后均可，但别拖到最后 - ⚠️
media属性（如media="(max-width: 768px)"）能让链接非阻塞，但不匹配时资源根本不会发请求——别指望它兜底 - ❌ 避免
@import：CSS 文件里写@import "reset.css"是串行加载，比并行<link>多一次往返，实测拖慢 FCP 300ms+
script 放哪儿？关键不是位置，是是否阻塞
同步脚本（没加 async 或 defer）无论放 还是 开头，都会立刻停住 HTML 解析。所谓“放底部”只是历史妥协方案，现代解法是用属性控制行为。
常见错误现象：把 <script src="app.js"></script> 塞在 里，又没加 defer，结果首屏白屏几秒。
- 业务主逻辑（如初始化 DOM、绑定事件）用
defer：下载不阻塞，DOM 解析完、DOMContentLoaded前按顺序执行 - 第三方统计、广告 SDK 用
async：下载不阻塞，下载完立刻执行，不保序，适合无依赖脚本 - 内联脚本（
<script>console.log()</script>）默认同步阻塞，除非极简且必须立即运行，否则别写 -
async和defer只对外部脚本（带src）有效，加在内联脚本上毫无作用
link rel="preload" 该不该用？怎么用才不翻车
link rel="preload" 不是“提前加载所有东西”的开关，而是告诉浏览器：“这个资源我马上就要，现在就去拿”。但它不执行、不应用，只影响下载优先级。
常见错误现象：给整个 vendor.js 加 preload，结果挤占带宽，关键 CSS 反而加载变慢；或者漏写 as 属性，导致浏览器无法设置正确请求头。
- ✅ 只对首屏必用资源用：比如 LCP 图片、首屏字体、核心 JS 模块（
as="image"/as="font"/as="script"） - ⚠️ 必须搭配
as属性，且值要准确；字体还要加crossorigin，否则可能被拒绝使用 - ❌ 不要用它加载非首屏资源；preload 后没在几秒内使用，浏览器会报 warning：“was preloaded … but not used within a few seconds”
- preload 不解决兼容性问题：不支持的旧浏览器直接忽略，无副作用，但也别指望它兜底
内联 CSS 和精简结构，容易被高估的两个坑
内联关键 CSS 看似能跳过一次请求，但操作不当反而更慢；DOM 结构臃肿带来的解析开销，常被误认为是 JS 或网络问题。
常见错误现象：把整套 Bootstrap CSS 内联进 <style></style>，体积超 14KB，触发额外 RTT；或层层嵌套 <div class="wrapper"><div class="container"><div class="content">，DOM 节点数暴增。
<ul>
<li>内联 CSS 不能超过 ~14KB（TCP 初始拥塞窗口限制），超了得不偿失</li>
<li>务必剔除非首屏规则（如 <code>.modal-hidden、#footer），工具如 critters 可自动化提取
<div> 嵌套，可能比压缩空格减少 10% DOM 节点数，直接影响解析耗时
<li>内联 CSS 无法被缓存，频繁更新的项目慎用；<code>media 查询会让它异步加载，失去内联意义真正卡住首屏的，往往不是代码写得多差，而是结构、资源加载策略、HTTP 缓存三者没对齐——一个 defer 写错位置，就可能让关键 CSS 变成白屏元凶。
