首屏文本节点必须写死在HTML最前面，即<h1>、<p>、<button>等需直接靠前出现，禁用无语义wrapper、<template>、<slot>及动态注入；须带内联字体样式，配fetchpriority="high"+loading="eager"加载关键资源；弱网下用JS探测并注入降级样式，DOM结构需裁剪非关键区块。
首屏文本节点必须写死在HTML最前面
浏览器解析HTML是流式的，DOM构建顺序直接决定文本渲染时机。如果首屏标题、摘要、按钮被包在
常见错误现象：用data-lazy占位、JS动态append内容、CSS visibility: hidden控制显隐。这些操作会让文本节点无法参与初始渲染路径，用户看到的仍是白屏或骨架屏，而非“有字但没样式”。
-
<h1>、<p>、<button>等首屏文本级元素必须直接出现在靠前位置，不包裹任何非必要容器 - 禁用
<template>或<slot>承载首屏文本——Safari 15.4+才支持降级渲染，老版本会丢内容 - 所有文本元素必须带明确
font-size、line-height和color内联样式（或通过内联
fetchpriority="high"要配对使用loading="eager"
仅加fetchpriority="high"不够。浏览器对资源的调度依赖优先级+加载策略双信号，单独设high可能被其他高优请求挤掉，尤其当页面同时preload了字体和hero图时。
使用场景很明确：首屏文本所在section的背景图、关键字体文件(.woff2)、hero区域图片——这些不是“锦上添花”，而是文本可读性的支撑资源。
立即学习“前端免费学习笔记（深入）”；
-
<img src="hero.jpg" fetchpriority="high" loading="eager">—— 首屏图片必须显式排除懒加载 -
<link rel="preload" href="text-font.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high">—— 字体不加crossorigin会因CORS失败，不加fetchpriority="high"则fallback字体撑开布局 - 非可视资源如埋点脚本、广告SDK，统一设
fetchpriority="low"，否则会抢文本通道带宽
弱网探测后必须用JS动态注入降级样式
不能把降级逻辑写进CSS里。SSR会把内联降级样式一并输出，污染SEO和爬虫抓取；也不能等CSS超时再fallback——弱网下外部CSS pending超2秒已是常态，用户早关页了。
真正有效的做法是：用JS主动探测网络质量（例如连续两次HTTP响应>800ms），一旦确认弱网，立刻插入一段内联<style>覆盖原有样式，确保文字至少以系统字体、14px、黑灰配色呈现。
- 降级样式必须包含
font-family: system-ui, -apple-system, sans-serif，禁用自定义字体回退链 - 避免使用
rem或em单位，全部用px防止根字号未生效导致文本不可见 - JS注入时机必须在
DOMContentLoaded之后、load之前，太早DOM未就绪，太晚首屏已卡住
DOM结构裁剪比资源优化更关键
很多人盯着Network面板优化JS/CSS，却忽略一个事实：弱网下浏览器解析HTML的速度没变，但JS执行和资源加载严重拖慢。此时若DOM树里塞满非关键模块（推荐位、评论区、侧边栏），会加剧布局计算压力，甚至触发强制同步布局（layout thrashing）。
结构优先级裁剪不是删代码，而是用语义化锚点预留降级路径——比如用<div data-skip-on-weak>标记非首屏区块，JS探测到弱网后直接removeChild，比CSS display: none更彻底。
-
<main>必须位于HTML最前，这是SEO权重、读屏器朗读、首屏渲染速度的共同基础 - grid-template-areas是最稳妥的视觉重排方式，它能解耦结构顺序与视觉顺序，避免Flex中
order值冲突导致的错乱 - 绝对不要用
@import引入CSS——它串行加载，实测拖慢FCP 300ms+
