关键在于切断多阶段渲染的强耦合链路，通过明确划分阶段边界、用轻量协调器显式调度依赖、前后端协同分级响应，实现可控分相渲染。
明确划分渲染阶段边界
移动端 H5 常见的“多阶段渲染”指：骨架屏 → 首屏数据 → 懒加载模块 → 个性化补全（如广告、推荐）→ 用户行为反馈（埋点、上报）。这些阶段若共用同一套请求触发逻辑（比如全堆在 onLoad 里），就极易因网络抖动、JS执行延迟、资源加载阻塞等原因错开节奏，导致后端同一时段收到大量分散但关联的请求（例如：100个用户同时触发“首页+商品列表+广告位+用户画像”四接口），形成瞬时雪崩。
解决办法是：为每个阶段定义独立的触发门限和超时兜底。
- 首屏数据：仅依赖核心字段，强制 800ms 内返回，否则降级为空态
- 懒加载模块：绑定 scroll 事件节流 + 离屏 200px 预加载，不抢占首屏带宽
- 个性化补全：延后到
requestIdleCallback或页面空闲期执行，不参与首屏 SLA - 用户行为上报：聚合 3s 内多次点击/曝光，批量异步发送，禁用同步 XHR
用轻量协调器替代“包装类”
不需要写一个叫 PhaseWrapper 的重型类。只需一个 20 行以内的协调函数，管理阶段间依赖与并发：
const phaseScheduler = (phases) => {
const results = {};
return Promise.all(
phases.map(({ key, fn, depends = [], timeout = 5000 }) =>
Promise.race([
fn().then(res => { results[key] = res; }),
new Promise(r => setTimeout(() => {
results[key] = { error: 'timeout', fallback: getFallback(key) };
r();
}, timeout))
])
)
).then(() => results);
};
调用时显式声明依赖关系：
phaseScheduler([
{ key: 'skeleton', fn: renderSkeleton },
{ key: 'mainData', fn: fetchHomeData, depends: ['skeleton'] },
{ key: 'ads', fn: fetchAds, depends: ['mainData'], timeout: 3000 },
]);
这样既避免了“一触即发”的雪崩式请求，又保留了阶段语义，便于监控各阶段成功率与耗时。
服务端协同做熔断与分级响应
前端分相只是半程。真正防雪崩，必须前后端对齐阶段语义：
- 所有接口 URL 加
?phase=mainData或?phase=ads参数，网关据此识别优先级 - 网关对
phase=ads类请求自动限流（如 QPS ≤ 500），失败直接返回预置 JSON 片段，不穿透到业务层 - 后端接口内部按 phase 返回不同粒度数据，例如
phase=mainData只返回商品 ID 列表，phase=detail才查详情，避免单次请求拖垮 DB
这种配合让“分相”从纯前端技巧，升级为端到端的稳定性策略。
