弱网下首屏文本必须写死在<main>开头且不依赖JS、CSS或模板，DOM需扁平化、关键样式内联、禁用干扰渲染的动画与字体策略。
弱网下首屏文本出不来，不是 JS 加载慢的问题，而是 HTML 结构本身没写对——关键文案必须写死在 <main> 开头，不靠 JS 注入、不依赖 CSS 显示、不藏在 <template> 里。
首屏 HTML 必须含纯文本，且位置靠前
很多项目把标题、摘要塞进 data-* 属性或 <script type="text/template">，JS 没跑完就是空白。真实弱网（比如 2G 下 400ms 延迟）等不及 hydration。
- 把
<h1>、<p>类核心文案直接写在<main>起始处，不要包裹在<div class="loading">或条件渲染容器里 - 禁用
<template>、<slot>、v-if/*ngIf控制首屏文案显示 - CMS 输出时，若支持“静态片段”，优先导出已渲染的 HTML 片段，而非占位符或 JSON 数据
-
<noscript>是 fallback 最后一道防线，但不能替代首屏内联文本
DOM 节点扁平化 + 关键样式内联
嵌套过深的 <div> 会拖慢解析，CSS 外链未加载时节点不可见，两者叠加导致“有 DOM 无内容”。
- 首屏结构控制在 3 层以内：例如
<main> <article> <h1>，避免<div><div><div><div><p> - 首屏必需样式（如字体大小、行高、颜色）用
<style>内联，不走外链 CSS；非关键样式延迟加载或拆包 - 移除首屏无用 class，比如
animate-in、fade-enter等动画类——它们不仅无效，还触发重排 - 禁用
font-display: swap的自定义字体，改用系统字体栈；若必须用，只 preload 一个 woff2 字体文件，并加crossorigin
图片与资源加载策略必须分层
图片不是越早加载越好。弱网下带宽争抢严重，首屏图提前加载可能挤占 HTML/CSS/JS 的传输通道。
立即学习“前端免费学习笔记（深入）”；
- 首屏
<img>显式设loading="eager"，其余一律loading="lazy"；background-image不支持该属性，得换成<img>+object-fit - 禁用
<link rel="preload" as="image">——浏览器不会按需解码，反而浪费连接和内存 - 首屏图片用 WebP 格式 + 尺寸裁剪（如宽度 ≤ 750px），体积压到 50KB 以内；服务端开启 AVIF 条件协商更优
- 第三方 SDK（统计、分享、IM）全部动态加载：
import().then()或首次交互后触发，不参与首屏资源竞争
构建与部署环节的隐形陷阱
本地测得快，上线就卡，往往是因为构建产物或 CDN 配置引入了隐性阻塞。
- Webpack/Vite 中确认
splitChunks已启用，node_modules中的库单独打包，避免每次变更都刷新整个vendor.js - 检查 HTML 模板是否被 SSR 框架自动注入空
<div id="app"></div>并清空内容——这等于主动放弃文本优先 - CDN 缓存策略中，
index.html缓存时间必须为max-age=0或no-cache，否则热更新后用户仍拿到旧 HTML - HTTP/2 下注意 Server Push 是否误推了非首屏资源（如 footer 图片、无关 CSS），它在弱网下反而降低有效吞吐
最易被忽略的是：文本写进 HTML ≠ 文本能被用户看见。它还得不被 display:none、visibility:hidden、opacity:0 或 transform 移出视口遮盖——这些样式哪怕内联，也会让浏览器跳过渲染流程。弱网优化不是调参数，是重新校准 HTML 的语义权重。
