弱网下HTML页面文本优先渲染与骨架占位设计

首屏文本渲染这件事，毫不夸张地讲，它是前端性能优化中最容易失控的环节之一。先给出核心结论：首屏文本绝对不能等待CSS加载完成后再显示，因为浏览器必须等待关键CSSOM构建完毕才能生成渲染树，而外部CSS在弱网环境下可能卡在pending状态超过两秒。尽管``中的标题、段落早已到位，用户看到的仍是白屏。这根本不只是“样式没出来”，而是整个渲染流程被阻塞在CSSOM这个关卡。

### 为何首屏文本不能等CSS加载完才显示 问题的根源在于，浏览器必须等关键CSSOM构建完成才能生成渲染树。外部CSS在弱网下可能陷入`pending`状态超过两秒——此时``里已经塞满了标题、段落等文本节点，但用户看到的仍是白屏或骨架屏。这并不是“样式没出来”，而是整个渲染流程被阻塞在CSSOM阶段。 具体如何解决？以下几条硬性规则值得牢记： - 关键CSS必须内联进``，且仅包含首屏文本所需的`font-size`、`line-height`、`color`、`margin`等基础声明，体积控制在10KB以内 - 非关键CSS改用``异步加载，避免阻塞渲染 - 禁用`@import`引入CSS，因为它会隐式创建串行依赖，在弱网下放大延迟 ### 骨架屏DOM结构怎么写才能不塌、不抖、不闪 90%的骨架屏塌陷，原因其实很简单——未设置尺寸，只靠`background-color`无法撑开流式布局。浏览器会把空`

`视为0×0像素渲染，真实内容一插入必然引发重排。 骨架屏的设计本质上是一份视觉契约，它必须和真实DOM共用同一套尺寸计算逻辑。以下关键点需要反复核对： - 图片占位必须用`aspect-ratio: 16 / 9`（现代方案）或`padding-top: 56.25%`加`position: relative`配合子元素`position: absolute`实现 - 文字行占位用`line-height乘以行数`设高度，比如三行正文就写`height: calc(1.5em * 3)`，千万禁用`height: 100%` - 所有骨架块加`overflow: hidden`，否则`background-position`动画会溢出圆角边界 - 绝对禁用``、`

`，rootMargin设为'200px'提前触发，留出网络与渲染缓冲 - 页尾占位符必须独立于骨架列表之外，且不参与任何动画，否则IntersectionObserver会误判可见性 - 服务端返回数据必须带`hasMore:true/false`，前端据此决定是否继续挂载observer，避免白发送请求 - 低配设备加`will-change:transform`优化动画，同时用`@media(prefers-reduced-motion:reduce){animation:none}`兜底 说到底，骨架屏不是“加个灰色div就完事”。它是和真实DOM共用同一套尺寸计算逻辑的视觉契约。一旦结构、尺寸、切换时机有一处没对齐，用户感知到的就是闪、抖、卡，而不是“正在加载”。