7.5
深览指数
科技Bestblogs·腾讯技术工程··AI 生成
跨端页面秒开，腾讯开源框架 Kuikly 是怎么做到的？
腾讯开源跨端框架 Kuikly 提出 TurboDisplay 方案，核心思路是缓存渲染节点而非数据或图片，通过双线并行、节点采集与增量更新三大机制，将缓存恢复从主链路中拆出形成独立路径，实现页面二次打开秒开。线上业务(QQ 游戏、腾讯地图等)取得 65%-80% 的耗时优化。适合对移动端/跨端性能优化有实操需求的技术读者，也可作为 UI 渲染底层架构设计的案例参考。
核心观点
- ▍TurboDisplay 的核心思路是缓存渲染节点而非数据或图片，可直接跳过业务逻辑执行、布局测量和节点构建等中间步骤，实现秒级呈现。
- ▍双线并行机制将缓存恢复从主链路中拆出，端侧直接读取缓存上屏，跨端侧后台正常执行业务逻辑构建真实页面，两者互不阻塞。
- 01传统优化方案(数据预取、图片缓存、预渲染、动态化框架)各有局限：数据预取仍需触发生命周期；图片缓存无法跳过布局测量；预渲染占用额外内存且互动受限。
- 02TurboDisplay 缓存的是端侧渲染引擎生成的 FlattenTree(压平节点树)中的 Command 对象，包含 View、Text、Image 等基础 View 类型及其属性、布局、事件信息。
- 03节点采集机制通过运行时 OT(Operation Tree)记录对 FlattenTree 的每一个修改操作，系统比较缓存与真实节点树的属性、布局、事件差异，自动更新缓存。
- 04增量更新仅局部更新差异部分，避免全量刷新导致的闪屏和跳变，在耗时上远小于全量 diff。
- 05延迟 diff 方案由跨端侧在生成渲染指令前先执行恢复逻辑(回放交互事件、应用滚动偏移)，使 diff 对比基础一致，避免端侧已交互状态被覆盖。
- 06性能验证：iPhone 7 Plus 上打开 QQ 游戏首页耗时从 450ms 降至 138ms，iPhone 13 Pro Max 上从 319ms 降至 124ms，优化比例 60%-80%。
- 07业务接入仅需实现一个开关接口，集成成本较低。
反方 / 局限
- — TurboDisplay 目前仅覆盖页面二次打开场景，首次打开仍需走完整链路，团队规划后续覆盖首次打开场景。
KuiklyTurboDisplayFlattenTree腾讯QQ 游戏腾讯地图延迟 diff增量更新
3 分钟 · 2 卡片 · 6 资料
读原文 →