首屏文本不能等css加载完才显示，因为浏览器必须等关键cssom构建完成才能生成渲染树，而外部css在弱网下可能pending超2秒，导致白屏或骨架屏；此时dom已有内容，但渲染被阻塞在cssom环节。

html页面在弱网环境下的文本内容优先渲染方案实战

为什么首屏文本不能等CSS加载完才显示

浏览器必须等关键CSSOM构建完成才能生成渲染树，而外部CSS文件在弱网下可能卡在pending状态超2秒——此时DOM里已有

和

，但用户看到的仍是白屏或骨架屏。这不是“样式没出来”，是渲染流程被阻塞在CSSOM环节。

常见错误现象：LCP指标差、3G下首屏等待超3秒、用户反复刷新页面。根源不是JS慢，而是成了单点故障。

内联首屏必需的文本样式（font-family、line-height、color、font-size），体积控制在1KB以内
把非文本相关样式（如动画、悬停效果、栅格布局）全部剥离到外链CSS，用media属性隔离：<link rel="stylesheet" href="layout.css" media="screen">
避免@import，它会串行阻塞，等价于把多个CSS请求压进一个长队列

如何用`fetchpriority`确保文本节点优先解析

fetchpriority不是锦上添花，而是告诉浏览器：“这个资源影响文字是否能立刻读到”。默认所有和都被标记为low，哪怕它是标题下的<h1></h1>父容器背景图，也会和文本争带宽。

使用场景很明确：只要DOM节点内容属于首屏可读信息（标题、摘要、操作说明），其关联资源就该提权。

首屏<h1></h1>所在section的背景图，加fetchpriority="high"并配合loading="eager"
字体文件（.woff2）必须加fetchpriority="high"，否则fallback字体撑开布局引发CLS
非可视资源如埋点脚本、广告SDK，统一设fetchpriority="low"，不抢文本通道

DOM结构怎么写才能让文本最快“吐”出来

HTML解析是流式的，浏览器边下载边构建DOM树。如果首屏文本被包在五层嵌套

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

里，或依赖JS动态插入，那它实际出现在渲染树里的时机就被严重推迟。

容易踩的坑：用data-lazy占位符包裹标题、把

内容延迟append、靠CSS visibility: hidden控制显隐——这些都会让文本节点无法进入初始渲染路径。