搜索渲染架构演进

1. 美团-到店事业群平台技术到店综合周效翰商家前端技术负责人

2.

3. 搜索渲染架构演进梅旭光百度资深研发工程师

4. 梅旭光就职于百度搜索前端团队技术方向前端框架 meixg@foxmail.com https://weibo.com/u/2079146953 https://github.com/meixg 服务器端渲染 Node.js 服务开源贡献语言转换工具 ts2php 小程序开发框架 Mars Node.js 服务框架 Hoth

5. • 背景与挑战 • 架构方案介绍 • 方案落地实践 • 方案收益

6. • 背景与挑战 • 架构方案介绍 • 方案落地实践 • 方案收益

7. 业务背景【量级大】搜索结果页，每天十亿级流量。【任务重】个性化展现，整页无缓存服务器端渲染。【内容多】100+ 开发者，每日进行 20+ 次产品修改。【未实现同构】Web 端、Native 端已使用 JS，服务端还是 PHP。

8. 历史架构 Smarty + PHP，流式渲染渲染逻辑与数据处理、召回、展现策略等逻辑混合在一起

9. 存在的问题技术栈落后 Smarty 模板强依赖 PHP（HHVM）环境组件化方案需要基于 PHP 来实现

10. 存在的问题耦合严重前端组件化方案只解决了前端内部分工问题。 PHP 与 Smarty 存在强耦合：业务逻辑与渲染逻辑强耦合。

11. 当前渲染组织结构 PHP 层直接处理渲染逻辑业务逻辑与渲染逻辑耦合各业务需要处理模板与多种渲染机制

12. 存在的问题影响研发效率基于 PHP 的方案有学习成本模板的可维护性、可扩展性低。成为业务发展瓶颈。

13. • 背景与挑战 • 架构方案介绍 • 方案落地实践 • 方案收益

14. 如何解决？ • 渲染逻辑抽离，形成单独的服务，微服务拆分。 • 技术栈从 PHP + Smarty 迁移为 Node.js + Vue/San。 • 通过单卡超时退出等机制，提升渲染稳定性。 • 支持线上渲染之外的其他能力扩展：模板预览，单卡内容输出。

15. Why Node.js？实现多端同构

16. 总体架构

17. 总体架构业务逻辑部分与渲染部分完全分开。同时支持了 VueSSR 以及 SanSSR

18. 渲染组织结构不同产品方只需要与 Node.js 服务进行对接。同时支持多 App 渲染。支持多种渲染机制。提供 UI 库等基础库和插件。

19. 多进程主从并行渲染无法缓存，性能要求高？多进程主从并行渲染架构充分利用线上机器 CPU （100 核），避免卡片间相互干扰，提升性能。

20. 单进程与多进程对比渲染机制同步渲染异步-多进程渲染耗时 46.6ms 27.3ms 进程数 8主进程 8主进程 * 8子进程内存占用 1200MB 8000MB 50% 的渲染耗时提升

21. 进程模型多个 Node.js 实例。每个 Node.js 实例下维护多个 child 进程。充分利用多核特性。

22. 多进程主从并行渲染将主模板和卡片内容分开，主模板与卡片内容并行渲染。

23. 多进程主从并行渲染每个子进程渲染一张卡多个卡片之间进行并行渲染

24. 多进程主从并行渲染服务内部任务调度：进程池 + RR 调度

25. 多进程主从并行渲染服务间任务调度： RR 调度首屏提前返回全链路支持 chunked 协议

26. • 背景与挑战 • 架构方案介绍 • 方案落地实践 • 方案收益

27. 实践中遇到的问题前置依赖 • 主框架与子区域之间的解耦。性能稳定性 • 线上问题排查 • 偶现的渲染超时 • 部分进程渲染出错 • Vue-SSR 的性能问题 • 上线时间过长 • 进程间通信问题迁移路径 • 如何平滑迁移

28. 方案落地实践：模块解耦子模块独立渲染的前提：业务模块与主模板解耦。独立业务模块的接口、依赖和元信息定义。

29. 实践中遇到的问题前置依赖 • 主框架与子区域之间的解耦性能稳定性 • 线上问题排查 • 偶现的渲染超时 • 部分进程渲染出错 • Vue-SSR 的性能问题 • 上线时间过长 • 进程间通信问题迁移路径 • 如何平滑迁移

30. 性能优化：框架SSR Vue-SSR 去掉 VNode 构建、Patch 等步骤直接进行字符串拼接

31. 性能优化：框架SSR 组件编译产物体积 –30% 工具函数 ~800 行 vs vue-server-render ～8000 行渲染耗时降低 35%

32. 实践中遇到的问题前置依赖 • 主框架与子区域之间的解耦性能稳定性 • 线上问题排查 • 偶现的渲染超时 • 部分进程渲染出错 • Vue-SSR 的性能问题 • 上线时间过长 • 进程间通信问题迁移路径 • 如何平滑迁移

33. 性能优化：进程间通信 uds 特性  不需要经过网络协议栈  不需要打包解包、计算校验  需要内存拷贝问题 1. 数据量大，单次内存拷贝消耗大一次请求 N 张卡，N 次分发 + N 次回调，4N 次大内存拷贝。 2.卡片数量多，单次请求拷贝次数多

34. 性能优化：进程间通信通信阶段耗时降低 60%

35. 实践中遇到的问题前置依赖 • 主框架与子区域之间的解耦性能稳定性 • 线上问题排查 • 偶现的渲染超时 • 部分进程渲染出错 • Vue-SSR 的性能问题 • 上线时间过长 • 进程间通信问题迁移路径 • 如何平滑迁移

36. 稳定性：全流程监控请求数、时间 active handles 垃圾回收 event loop heap 信息 …

37. 实践中遇到的问题前置依赖 • 主框架与子区域之间的解耦性能稳定性 • 线上问题排查 • 偶现的渲染超时 • 部分进程渲染出错 • Vue-SSR 的性能问题 • 上线时间过长 • 进程间通信问题迁移路径 • 如何平滑迁移

38. 稳定性：模块预热遇到的问题：线上渲染超时报警频发。发现问题集中出现在服务重启之后。

39. 稳定性：模块预热遇到的问题：线上渲染超时报警频发。发现问题集中出现在服务重启之后。 code cache？并不能解决问题

40. 稳定性：模块预热为什么要进行预热？ Node.js 初次执行时间很慢

41. 稳定性：模块预热服务启动｜预热｜接流

42. 稳定性：模块预热子进程单独预热

43. 稳定性：模块预热线下预热数据定时产出 -> 上线配送

44. 实践中遇到的问题前置依赖 • 主框架与子区域之间的解耦性能稳定性 • 线上问题排查 • 偶现的渲染超时 • 部分进程渲染出错 • Vue-SSR 的性能问题 • 上线时间过长 • 进程间通信问题迁移路径 • 如何平滑迁移

45. 稳定性：单卡超时控制单卡渲染超时，主动丢弃提升整页稳定性

46. 实践中遇到的问题前置依赖 • 主框架与子区域之间的解耦性能稳定性 • 线上问题排查 • 偶现的渲染超时 • 部分进程渲染出错 • Vue-SSR 的性能问题 • 上线时间过长 • 进程间通信问题迁移路径 • 如何平滑迁移

47. 稳定性：热部署每日 N+ 次上线变更，如何提高上线效率？减少服务重启频率缓存清理，重新预热上线时间减少 40%

48. 实践中遇到的问题前置依赖 • 主框架与子区域之间的解耦性能稳定性 • 线上问题排查 • 偶现的渲染超时 • 部分进程渲染出错 • Vue-SSR 的性能问题 • 上线时间过长 • 进程间通信问题迁移路径 • 如何平滑迁移

49. 方案落地实践：迁移路径每天十亿级流量、100+开发者、每天都有大量上线。无法停下来进行迁移，需要一个平滑的迁移路径。

50. 基础设施建设

51. 平滑迁移主模板与卡片并行卡片之间并行

52. 实践中遇到的问题前置依赖 • 主框架与子区域之间的解耦性能稳定性 • 线上问题排查 • 偶现的渲染超时 • 部分进程渲染出错 • Vue-SSR 的性能问题 • 上线时间过长 • 进程间通信问题迁移路径 • 如何平滑迁移

53. • 背景与挑战 • 架构方案介绍 • 方案落地实践 • 方案收益

54. 方案收益 • 渲染技术的更新换代，优化服务端渲染机制。 • 服务端、web端、客户端，三端同构。 • 优化服务端渲染耗时，提升结果页渲染的稳定性。

55. 收获 • Node.js 在大流量场景下渲染服务实践。 • 主从并行渲染实践，有效提高性能。 • 一些提升性能及稳定性的优化点。

56.

57. 搜索渲染架构演进扫描二维码提交议题反馈