首屏文本必须在CSS加载完成前渲染，否则弱网下因CSSOM阻塞导致白屏；内联关键CSS需≤1KB以避免解析延迟，仅保留LCP元素必需样式，禁用@import/calc/复杂选择器，并用工具自动提取。
首屏文本必须在CSS加载完成前就渲染出来，否则弱网下用户看到的就是白屏或骨架屏——这不是样式没出来，是整个渲染树被卡在CSSOM构建环节。
为什么内联关键CSS必须控制在1KB以内
浏览器解析完HTML后，会立即开始构建CSSOM；若关键CSS体积过大（比如把整站样式都塞进去），哪怕内联了，也会因解析耗时长而延迟渲染树生成。实测超过1.2KB时，3G下LCP平均推迟300ms以上。
- 只提取LCP元素直接用到的样式：
font-family、font-size、line-height、color、margin-top/bottom - 禁用
@import、calc()、复杂选择器（如.header .nav ul li a）——它们会拖慢CSSOM解析 - 用
critters或purgecss配合LCP selector自动提取，别靠人眼判断
fetchpriority="high"该加在哪些节点上
这个属性不是装饰用的，它直接干预浏览器资源调度队列。默认所有<img>、<link>都被标记为low，哪怕它是首屏标题背景图，也会和文本争带宽。
- 首屏
<h1>父容器的背景图：<section style="background: url(...)"></section>→ 改成<img src="..." fetchpriority="high" loading="eager"> - 字体文件
.woff2必须加fetchpriority="high"，否则fallback字体撑开布局引发CLS - 非可视资源如
analytics.js、广告SDK，统一设fetchpriority="low"
DOM结构怎么写才能让文本“立刻吐出来”
HTML解析是流式的，浏览器边下载边构建DOM树。如果首屏文本被包在五层嵌套<div>里，或者用data-lazy占位符包裹，文本节点根本进不了初始渲染路径。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 首屏文本节点（
<h1>、<p>、<button>）必须写死在HTML最前面，不包裹无语义wrapper - 禁用
display: contents替代文本容器——Safari 15.4之前版本会丢失文本渲染上下文 - 所有文本级元素必须带明确
lang属性，避免弱网下字体回退时重排
弱网检测失败时的兜底逻辑为什么不能写在CSS里
CSS无法感知网络状态变化，也无法执行条件逻辑。等CSS超时再降级，用户早已刷新三次。真正的兜底必须由JS动态触发，且要绕过DOMContentLoaded依赖。
- 用
fetch探测响应时间：连续两次response.time > 800ms即标记为弱网 - 立刻注入内联
<style>覆盖原有样式，确保文字至少以系统字体、14px、黑灰配色呈现 - 这个逻辑必须在
<head>中尽早执行，不要等DOMContentLoaded，更不要等React/Vue挂载
最容易被忽略的是：文本能“显示”不等于“可用”。当字体加载失败、行高错乱、lang缺失导致回退重排，用户看到的仍是不可读内容——这些细节比内联CSS本身更难调试，也更容易在线上静默发生。
