首屏文本节点必须直接写在后且不嵌套，关键css须内联（仅字体、字号、行高、颜色等基础排版），fetchpriority="high"精准用于文本强依赖资源，弱网探测需基于fetch响应而非navigator.online。
首屏文本节点必须写死在HTML最前面，不包裹、不延迟
弱网下白屏不是因为没下载完，而是浏览器卡在CSSOM构建上——但此时DOM早已解析完毕，只要文本节点在
开头就位，就能立刻进入渲染树。一旦被套三层、用data-lazy占位、或靠JS append，文本就彻底掉出初始渲染路径。
-
<h1></h1>、<p></p>、<button></button>等首屏可读内容，必须直接写在后，不嵌套无语义容器 - 禁用
display: contents替代文本父容器——Safari 15.4以下版本会丢文本上下文 - 所有文本级元素必须带
lang属性，避免字体fallback时重排引发CLS - 不要用
visibility: hidden或opacity: 0“隐藏”标题再show，这会让浏览器跳过首次绘制
关键CSS必须内联，非关键样式用media隔离
CSS是阻塞渲染的单点故障。外部layout.css在3G下pending超2秒，首屏就永远卡住。解决方案不是“压缩CSS”，而是把影响文本渲染的规则（字号、行高、颜色、基础排版）全部内联到，其余样式走外链并加media条件。
- 内联CSS只保留：字体族、字号、行高、颜色、
font-weight、text-align、margin/padding基础值 - 栅格布局、动画、悬停效果、主题色等全部剥离到
<link rel="stylesheet" href="theme.css" media="screen"> - 绝对禁用
@import——它强制串行加载，等同于把多个CSS请求压进一个长队列 - 检查
document.styleSheets.length，确保内联style未被JS动态清空（某些UI框架会这么做）
fetchpriority="high"要精准打在文本关联资源上
默认所有<link>和<img>都被标记为fetchpriority="low"，哪怕它是<h1></h1>背景图，也会和文本争带宽。浏览器需要明确知道：“这个资源不加载完，用户就读不到标题”。
- 首屏
<h1></h1>所在<section></section>的背景图，加fetchpriority="high"+loading="eager" - .woff2字体文件必须设
fetchpriority="high"，否则fallback字体撑开布局引发CLS - 埋点脚本、广告SDK、统计上报统一设
fetchpriority="low"，不抢文本通道 - 不要全局给所有
<img>加high——只有首屏文本强依赖的图片才值得提权
弱网探测必须用fetch，不能靠navigator.onLine
navigator.onLine只返回布尔值，对2G、高延迟、丢包网络完全失效。真正可用的弱网判断，必须基于真实HTTP响应行为。
- DOM ready后发起轻量
fetch('/ping?_t=' + Date.now())，超时设为1500ms（比常规更激进） - 连续两次响应时间>800ms → 触发降级逻辑；单次失败不处理，避免误判
- 降级提示必须JS动态插入：
<div id="network-status" aria-live="polite"></div>，禁止写死在HTML里 - 插入时用
textContent而非innerHTML，文案固定不拼接，防XSS - 降级样式不能写在CSS中，必须由JS注入内联style，否则SSR会污染SEO
main.css全内联，结果HTML体积暴涨、缓存失效、CDN边缘节点压力翻倍。真正的“关键CSS”往往不到1KB，只够撑起文字可读性——多一像素的边框、多一行的媒体查询，都可能让弱网下的首屏时间从800ms跳到2.3s。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
