关键CSS需紧贴后、script必须加defer、DOM深度应≤6层，三者协同优化可将FCP从300ms降至2.1s；内联CSS控制在1KB内，defer保序执行，DOM嵌套超6层会引发布局耗时非线性增长。
关键CSS内联位置错、script没加defer、DOM深度超6层，这三件事单独看都不致命，但合起来能让FCP从300ms拉长到2.1s——不是服务器慢，是浏览器被卡在渲染树合成前。
关键CSS必须紧贴<meta charset>之后
浏览器按顺序解析HTML，<style></style>的位置决定它能否抢在第一个<link rel="stylesheet">之前完成CSSOM构建。放错位置等于主动放弃首屏加速机会。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
<meta charset="utf-8">之后立刻跟<style></style>，中间不能插<title></title>、<meta name="viewport">或任何其他标签 - 禁止在
<style></style>里写@import——它会发起同步请求，等同于新增一个阻塞点 - 内联体积控制在1KB以内（gzip后），实测超过5KB在3G网络下TTFB延迟增加400ms+
- 工具提取不等于直接复制：用
critters或criticalCLI时，必须指定真实视口尺寸（如{ width: 375, height: 667 }），否则会把@media (prefers-color-scheme: dark)这类非首屏规则也塞进去
script放defer才重要
物理位置只是表象，是否阻塞解析取决于加载策略。把一堆<script src="xxx"></script>全塞进
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
