弱网下文本优先需将标题、副标题、核心段落写死在首屏HTML的<main>内，不依赖JS渲染、CSS阻塞或深层嵌套，关键样式内联，DOM扁平化，禁用干扰渲染的动画与字体策略。
弱网下想让文本先出来，不是靠“把 JS 拆小一点”或者“加个 loading”，而是得从 HTML 结构本身动手——文本内容必须在首屏 HTML 中、不依赖 JS 渲染、不被 CSS 阻塞、且 DOM 节点足够轻。
首屏 HTML 必须包含纯文本内容，不能靠 JS 注入
很多项目用 innerHTML = '...' 或 React/Vue 的 SSR 后 hydration 来填主文案，弱网下 JS 加载慢，用户就看到空白或骨架屏卡住。真正的“文本优先”意味着：标题、副标题、核心段落这些文字，必须写死在初始 HTML 里，且位于 <main> 内部最靠前的位置。
- 禁止用
data-*属性标记“待填充区域”，如<div data-content="title"></div>；这类节点在 JS 未执行前就是空的 - 避免把关键文案包裹在
<template>或<script type="text/template">里——它们默认不渲染 - CMS 输出时若支持“静态片段”，优先导出文本块而非占位符；若必须动态，至少 fallback 到内联
<noscript><p>默认文案</p></noscript>
CSS 不能阻塞文本渲染，关键样式要内联且极简
哪怕 HTML 里写了文本，如果 <link rel="stylesheet"> 在后面，浏览器可能等 CSSOM 构建完才开始绘制文字——弱网下这个等待可能是秒级。解决方案不是删 CSS，而是切分它。
- 只把影响首屏文本排版的样式内联进
<head>：比如body字体、h1行高、pmargin 和 color；其余全拆到异步加载的 CSS 文件中 - 禁用
@import，它会让 CSS 加载串行化，在 3G 下可能多拖 800ms；所有样式规则必须平铺或用<link rel="preload" as="style">显式控制 - 避免用
font-display: swap以外的字体加载策略；block会导致文本长时间不可见，optional可能直接不加载
DOM 结构要扁平，嵌套过深会拖慢文本解析与布局
浏览器解析 HTML 是流式的，但每层嵌套都会增加 token 解析和节点创建开销。弱网下 HTML 文件下载慢，解析阶段的 CPU 压力反而更明显——尤其低端安卓机上，6 层嵌套的 <div> 可能让首屏文本延迟 200ms+ 出现。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 检查首屏内是否出现
<div><div><div><article><section><div>这类结构；能用display: contents替代无语义 wrapper 的就替换（注意 Safari 15.4+ 支持） -
<main>内部不要塞<aside>、<footer>等非首屏模块；它们该用<div data-lazy="aside"></div>占位，JS 控制插入时机 - 删除所有空
<div></div>、无 class/id 的冗余容器——它们仍参与 DOM 构建，白占内存和解析时间
文本渲染后立即可读，别被动画/过渡拖住视觉反馈
文本出来了，但如果页面同时触发了 CSS 动画、transition 或 transform，浏览器可能把重绘压到下一帧，导致用户“看见文字却感觉没出来”。尤其在后台标签页或低端设备上，requestAnimationFrame 调度严重滞后。
- 首屏文本容器禁止设
opacity: 0; transition: opacity .3s这类入场动效；直接opacity: 1，需要隐藏时用display: none或移除节点 - 禁用
will-change: transform等提前声明——它在弱网设备上反而引发额外图层合成开销 - 检查
window.matchMedia('(prefers-reduced-motion: reduce)').matches，为启用了“减少运动”的用户跳过一切视觉变化
真正难的不是让文本“出现”，而是让它“稳定地、可预期地、不依赖任何外部条件地出现”——这要求你放弃“等 JS 加载完再组织内容”的惯性思维，回到 HTML 作为文档的本质：它本就是内容的载体，不是 JS 的启动器。
