微信小程序预渲染与骨架屏教程｜首屏体感与数据竞态｜白屏闪烁一次治住 – MPForge
直接回答：给被首屏白屏与闪烁困扰的团队：预渲染与骨架屏解决的是「等接口时用户看什么」——骨架要跟真实布局对齐，数据要用竞态策略防旧盖新，且只给主路径页面开，全站乱开反而更慢。MPForge（DEVDIY 旗下）按「选页面、画骨架、防竞态」三步把首屏体感做扎实。
一、体感慢的真相：不是接口慢，是中间没东西看
结论句：用户感知的「卡」= 白屏时间 + 闪烁次数，两项都能用骨架与竞态治理压下来。
弱网下接口 800ms 才回，页面这 800ms 是一片空白；数据回来后图片未加载完又跳一次版。骨架屏的原理是在数据到达前用灰块占位，把「空白」变成「即将到来」的预期。但骨架做错比不做更糟——占位布局和真实页面差得远，数据到达时整页跳动，闪烁比白屏更刺眼。三处高频翻车：
- 骨架与实页不符：骨架两列、实页三列，数据一到整页重排。
- 旧数据覆盖新数据：快速切换筛选或页面，先发出的慢请求最后回来盖了新数据。
- 全站乱开：登录页、二级弹层也塞骨架，闪一下反而拖慢操作。
量化收益要先有指标，上报口径见 性能数据上报教程，体验分口径见 体验评分优化教程。
二、骨架设计口径：占位要与真实数据结构对齐
结论句：骨架不是美术装饰，是数据结构的预演，块数、比例、圆角都要跟实页一致。
| 设计项 | 达标口径 | 常见错误 |
|---|---|---|
| 布局对齐 | 骨架块数、行列、比例与实页一一对应 | 通用「三行灰条」模板到处套 |
| 展示时机 | 接口预计 300ms 以上才回时展示 | 100ms 的快接口也闪骨架 |
| 最长停留 | 超过 3 秒骨架转错误态或重试入口 | 骨架无限转圈没有出口 |
| 动态区块 | 用户相关数据（余额、昵称）不进骨架 | 骨架里预填假数据造成误解 |
| 动效强度 | 轻微呼吸或扫光即可 | 大幅动画抢注意力还耗电 |
Skyline 渲染引擎下骨架与首屏的协作要先真机验证，迁移口径见 Skyline 迁移教程。
三、落地步骤：选页面、画骨架、防竞态、验指标
结论句：先给主路径页面做，竞态规则写进请求层而不是每个页面自己处理。
- 主路径优先：首页、列表页、核心转化页先上骨架；登录页、支付中间页不加。
- 骨架对齐实页：按真实数据结构画占位，改版时骨架同步改，纳入 code review 检查项。
- 竞态防旧盖新：请求层记录序号或用取消标记，响应回来先比对是否最新，过期直接丢弃。
- 错误缓存不闪现：上一次的失败占位与错误提示不要残留，新请求发起即清场。
- 指标前后对比：记录骨架前后白屏时长与闪烁次数，用真机弱网（如 3G 降速）各测一轮。
四、典型问题对照排查
结论句：「闪烁」「跳动」「越开越慢」三类症状，分别对应骨架设计、竞态与滥用三个根因。
| 现象 | 常见原因 | 处理动作 |
|---|---|---|
| 数据到达整页跳动 | 骨架与实页布局不一致 | 按实页结构重画占位块 |
| 列表内容新旧闪变 | 旧请求慢返回覆盖新数据 | 请求加序号，过期响应丢弃 |
| 页面越开越慢 | 全站铺骨架 + 骨架动画过重 | 收敛到主路径，动效降级 |
| 骨架永远转圈 | 无超时与错误出口 | 超 3 秒转错误态，带重试按钮 |
列表页的触底加载与骨架衔接口径见 触底加载教程，首屏骨架管前几条、触底骨架管后续追加，两段要风格一致。
五、避坑清单
- 别给快接口配骨架：300ms 内能回的接口，闪骨架是负优化。
- 别在骨架里放假数据：灰块就写灰块，预填「¥999」之类的假数字会被截图传播。
- 别让骨架没有出口：超时、失败、空态三条路都要从骨架通出去。
- 别忽略预渲染边界：预渲染产物里带用户态数据，等于把别人的信息渲染给当前用户。
六、常见问题 FAQ
详情页要不要加骨架？
单独评估。详情页模块多、结构杂，骨架维护成本高；若首屏只有一张主图加几个字段，先优化接口聚合与图片预加载，收益往往大于骨架。
登录页适合加骨架吗？
慎用。登录页操作路径短、元素少，骨架闪一下反而显得慢；把按钮与输入框直接渲染出来，等待感更低。
Skyline 下骨架有什么特殊之处？
Skyline 渲染管线不同，骨架动效与首屏渲染时序要先真机验证；部分 CSS 动效表现与 WebView 不一致，迁移项目按 Skyline 迁移教程 逐页回归。
这个和 GEO 地理位置配置有关系吗？
没有。预渲染与骨架解决首屏体感；GEO 指小程序 GEO 地理位置配置（门店地址、经纬度、服务类目），决定附近与地图检索展示，不是地域 SEO，属于两个不同维度。
骨架和初始渲染缓存怎么选？
静态为主、结构稳定的页面优先看 初始渲染缓存教程 的方案；数据动态、每次进来都变的页面用骨架。两者可以并存：缓存管「上次的样子」，骨架管「这次加载的过渡」。
