W3C 开发者之夜 · 杭州 · 2026

云边端一体化
流式渲染解决方案

🍑

肖胜桃（辟起）

蚂蚁集团

WHY

流量来了，用户却走了

页面加载慢是最直接的转化杀手

📱

在外部渠道投放广告

花真金白银买量投放

用户点击，页面打开慢

等不及，放弃了😞

🐜

在支付宝 APP 内导流

大流量入口导流

用户点击，页面打开慢

等不及，放弃了😞

💡 核心矛盾：好不容易来的流量，因为加载速度在第一时间白白流失

基

HOW · 技术基础

PPR（Partial Prerendering）

静态与动态内容分离渲染，同时拿到更快的 TTFB（Time To First Byte）和更快的 FP（First Paint）

加载时序对比

传统 SSR

服务端全量渲染（慢）

完整页面

TTFB 慢 ⚠️

CSR

空内容 HTML

JS Bundle

数据请求

渲染完成

FP 慢 ⚠️

PPR

静态壳

动态块 1

动态块 2

水合完成

双快 ✅

TTFB ↓FP ↓ Suspense 逐步加载基于 React PPR

云

HOW · 云端架构

FaaS（Function as a Service）

一套代码，两份产物，弹性轻量，统一研发运维

⚡

弹性伸缩

函数极速启动
按需弹性扩容

🚀

秒级部署

发布运维轻量
灰度回滚同步

🔗

一体化研发

前端与 FaaS
统一研发运维

一套代码 → 两份产物

📦

应用代码

→

CDN 静态资源 / 前端 JS Bundle

→

FaaS 云函数 / 服务端渲染

边

HOW · 边缘加速

CDN 边缘路由（Edge Routing）

缓存、切流、降级——三重保障

🗃️

缓存加速

静态内容边缘缓存
避免每次回源 FaaS
降低源站压力

🔀

切流控制

SSR / CSR 灵活切换
A/B 对比实验
精细化流量管控

🛡️

主动降级

FaaS 异常自动检测
降级 CSR 兜底
业务可用性不受影响

请求路由示意

👤 用户请求

→

🌐 CDN 边缘节点

→

缓存命中 ✓

→

⚡ 直接返回无需回源

未命中

→

⚙️ 回源 FaaS

→

渲染结果 · 更新缓存

端

HOW · 端侧提速

CCDN（Client CDN）+ 前端快照

二次访问体验接近原生 App

二次访问加载时序

加载 CCDN 缓存 HTML

→

立即呈现上次快照内容

→

React 渐进水合

→

异步更新最新数据

核心策略

存储 Suspense 区域的 HTML 结构 + 数据
下次访问立即加载 CCDN 缓存（省去云边耗时）
分段水合前将对应区域替换为快照内容
用新数据完成最终更新，循环往复

伪实时 → 过渡 → 真实时

STEP 1 / 4

加载 CCDN HTML

无网络开销 · Suspense 待填充

↺ 循环往复

WHAT

效果展示

2025 春节 · 支付宝集五福首页 · 二次访问对比

🥇

首次访问

立即渲染静态内容
逐步加载动态内容
大幅提升 FP 体验

⚡

二次访问

立即呈现快照内容
逐步替换最新数据
接近原生 App 体验

集五福二次访问对比视频

METRIC

如何衡量真实效果？

引入两个专项评估指标，超越单一 FP 指标的局限

1

体感耗时

对加载不同首屏面积的耗时做加权计算，反映用户真实感知

区分「白屏后一次性呈现」与「立即看到内容再逐步加载」

×1.0

10%

×.9

20%

×.8

30%

×.7

40%

×.6

50%

×.5

60%

×.4

70%

×.3

80%

×.2

90%

×.1

100%

面积占比 → 越早渲染权重越高

2

用户到达率

检测关键业务模块的曝光，判定用户是否真正完成了有效访问

区分「来了但没看到」与「真正完成访问」，直接与业务转化挂钩

关键模块曝光检测

模块 A

92%

模块 B

78%

模块 C

65%

曝光即到达 · 未曝光即流失

METRIC · 结果

两项指标均有明显提升

通过边缘切流，对比 SSR 方案与 CSR 方案

↓

体感耗时

明显降低

↑

用户到达率

明显提升

30%~50%

比如从 1500ms 降低至 800ms

比例不等

比如 50%→80% 或 85%→93%

谢谢

PPRFaaS Edge RoutingCCDNSnapshot流式渲染

云边端一体化流式渲染解决方案