必须是第一个标签，因浏览器解析HTML前1024字节时若未识别该声明，将回退至系统默认编码（如GBK或ISO-8859-1），导致中文乱码、class截断、CSS失效；位置错误（如前有注释、空格或）会使旧版Android WebView等跳过识别。
把 <meta charset="UTF-8"> 放在 最开头，紧跟着是 <meta name="viewport">，再之后才是 <link rel="preload"> 和 <link rel="stylesheet"> —— 顺序错一位，首屏就可能白屏几百毫秒。
为什么 <meta charset> 必须是
浏览器解析 HTML 是流式的，<meta charset="UTF-8"> 若不在最前（比如前面有注释、空格或 <title></title>），旧版 Android WebView 或某些 SSR 输出场景会跳过识别， fallback 到 GBK 编码 —— 表现为中文乱码、class 名被截断、CSS 选择器失效。构建后检查源码，确认它紧贴 开始，中间不能有任何字符（包括换行）。
常见错误现象：
- 本地双击打开 HTML 时中文显示为方块
- Webpack/Vite 构建后，
html-webpack-plugin模板意外插入了空行 - SSR 中 Node.js 流未先 flush charset 声明就写入其他内容
<meta name="viewport"> 放错位置会触发重排
它必须紧跟在 <meta charset> 后面。如果浏览器开始渲染后再遇到 viewport，会先按桌面宽度布局，等解析到该标签再强制缩放重排 —— 用户看到“闪一下变大/变小”，CLS 指标直接拉高。
立即学习“前端免费学习笔记（深入）”；
使用场景和参数注意点：
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- content 值只用
width=device-width, initial-scale=1.0，禁用maximum-scale=1.0和user-scalable=no（可访问性审查失败 + iOS 双击放大失效） - 不要写
width=375这类固定值，高 DPR 设备（如 Pixel 7）会误判分辨率，文字发虚 - 所有移动端页面都必须配，且位置不可妥协
<link rel="preload"> 写在哪儿才真正起效
<link rel="preload"> 不是“越早写越好”，而是“必须出现在浏览器解析到它时，关键资源请求还没发起”。一旦写在 <link rel="stylesheet"> 后面，很可能样式请求已发出，预加载就成无效带宽竞争。
实操建议：
- 字体、首屏 CSS、LCP 图片的
<link rel="preload">必须放在最前面，紧挨<meta charset>和<meta name="viewport"> - preload 字体时
crossorigin属性必加，否则字体不会生效（2026 年仍有效） - 别对
main.js加 preload —— 它已被defer覆盖，重复预加载反而挤占 HTTP/2 流 - as 属性必须配对：
as="style"、as="image"、as="font"，否则浏览器不提升优先级
<link rel="stylesheet"> 和 <script></script> 的相对位置是硬约束
CSS 是渲染阻塞资源，浏览器必须构建完 CSSOM 才能绘制第一帧。如果 <link rel="stylesheet"> 出现在 <script></script> 后面，浏览器会先卡在 script 上等 JS 下载执行，再回头下载 CSS —— 双重阻塞。
关键规则：
- 所有
<link rel="stylesheet">必须在任何<script></script>标签之前 - 禁止在 CSS 文件里用
@import引入其他样式表，它强制串行加载，实测拖慢 FCP 300ms+ - 非关键 CSS（如
.modal、暗色模式）用media="print" onload="this.media='all'"延迟加载 - 首屏关键 CSS 应内联进
<style></style>，但只提取真实首屏用到的规则（如.hero、.nav），控制在 10–14KB 内
最容易被忽略的是：很多团队以为“把所有 CSS 内联 = 优化”，结果体积暴涨、无法缓存、后续更新不同步 —— 真正有效的内联，必须靠工具（如 critters 或 penthouse）提取并验证覆盖范围。
