首屏文本必须直写在html最前面，即、、等需直接出现在靠前位置，禁用无语义wrapper、、及动态注入；须带lang属性与内联基础样式，配fetchpriority="high"+loading="eager"加载关键资源，弱网下用js探测并注入降级样式。
首屏文本必须直写在HTML最前面，不能包、不能等
弱网下用户看到白屏，往往不是因为JS没跑完，而是浏览器根本还没把
和
放进渲染树——只要它们被套在
里，或者藏在中，就卡在解析阶段不动了。
弱网探测必须用fetch响应时间，不能信
-
<h1></h1>、<p></p>、<button></button>这些节点得直接出现在靠前位置，中间不插任何无语义容器 - 禁用
data-lazy占位、innerHTML = ''填充、<slot></slot>或<template></template>承载首屏文案——这些在JS未执行前就是空的 - 所有文本元素必须带
lang属性（如<p lang="zh-CN"></p>），否则字体fallback时容易触发CLS（布局偏移）
关键样式必须内联，且只留LCP所需最小集
把整个style.css塞进是反模式：体积大、无法卸载、仍阻塞渲染。真正该内联的，只是让<h1></h1>和正文段落能立刻显示出来的那几条规则。
- 用
critters之类工具提取LCP元素所需的font-size、line-height、color、margin等基础样式，内联为<style></style> - 动画、栅格系统、复杂媒体查询、
@keyframes全部剥离，改用<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">延迟注入 - 绝对禁用
@import：它强制串行加载，弱网下等于把多个CSS请求压进一个长队列
字体与图片资源必须提权，否则fallback会撑开布局
文本能出来，不代表能稳住——.woff2字体加载慢，系统字体fallback后字宽不同；背景图没及时加载，<h1></h1>所在容器高度塌缩。这两类问题都会拖慢文本可见时间，甚至引发重排。
- 所有首屏用到的字体文件（
.woff2）必须加fetchpriority="high"+rel="preload"+crossorigin - 首屏
<h1></h1>所在<section></section>的背景图，加fetchpriority="high"+loading="eager" - 非可视资源（埋点脚本、广告SDK）统一设
fetchpriority="low"，避免抢文本通道带宽 - 图片必须带
decoding="async"，防止解码阻塞主线程；小图标优先用inline SVG绕过HTTP请求
弱网探测必须用fetch响应时间，不能信navigator.onLine
navigator.onLine只反映设备是否连上网络，不反映实际带宽质量。很多“已连接”状态下的4G/5G信号，在基站拥堵时响应时间超1.5秒，但onLine仍是true。
- 真实有效的做法是：发起两个轻量
fetch('/ping')，若连续两次响应时间>800ms，即判定为弱网 - 确认弱网后，立即用JS注入一段内联
<style></style>，覆盖原有样式，确保文字至少以system-ui、14px、黑灰配色呈现 - 降级逻辑绝不能写进CSS里——SSR会把内联降级样式一并输出，污染SEO和爬虫抓取
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
