百度资深工程师 钱思成 - 百度搜索前端架构的演进

作为日均 pv 20 亿以上的产品,百度搜索每天都在提供稳定的用户服务。同时团队内外部有超过百人参与搜索结果的前端开发,平均每天上线 2.3 次。搜索前端架构的设计既要以稳定性为核心原则,又要综合考虑开发成本和开发效率。本次演讲将分享面对交互方式变化、新技术革新、规模扩张等挑战,百度搜索前端架构在演进过程中遵循的设计原则,以及在工程化、异步化、极速搜索、性能评价、服务可用性等领域的设计实践和解决方案。

1. 百度搜索前端架构的演进 钱思成 Baidu inc. Page Search Front End Team PFSE Qcon · 北京 · 2017
2. About Me BAIDU INC. PAGE SEARCH FRONT END TEAM 钱思成 2012年加入百度,现任 网页搜索部 前端资深工程师 性能、异步架构方向负责人 参与PC极速搜索架构、移动搜索架构 主导移动搜索、手机百度、pad异步化及极速搜索 建设搜索性能指标、评价及监控体系
3. 前端架构 什么是前端架构 百度搜索前端架构 基础架构 展现架构演进 服务架构演进 小结 演进实践 极速搜索 性能平台 服务可用性 总结
4. 什么是前端架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 工程师 开始 架构师 结束 专家 开始 开始 结束 切入点 结束
5. 什么是前端架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 前端 架构 Architecture 建筑、结构 … 部署运行 生产构建 代码开发
6. 什么是前端架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 前端架构 = 解决前端领域问题的超级武器
7. 什么是前端架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 百度搜索前端架构 产品 开发者
8. 前端架构 什么是前端架构 百度搜索前端架构 基础架构 展现架构演进 服务架构演进 小结 演进实践 极速搜索 性能平台 服务可用性 总结
9. 基本功能 BAIDU INC. PAGE SEARCH FRONT END TEAM 检索 > 展现 Qcon 2017
10. 基本架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 基础模块 基本框架、类库 构建方案 结构化 规范 开发规模:20人 日志规范 安全规范 编码规范 AMD规范 https规范 200X 2012 2014
11. 构建方案 Localstorage缓存优化 BAIDU INC. PAGE SEARCH FRONT END TEAM Ls不支持 3% 未复用 21% 部分复用17% 移动搜索 LS缓存使用率 百度搜索 61% 请求复用LS前端资源缓存 首屏时间节省 73ms 页面大小减小 67% 复用LS缓存 81% 手百
12. 构建方案 Localstorage缓存优化 BAIDU INC. PAGE SEARCH FRONT END TEAM 最少知道 global.js?__lsInline 预编译插件 Plugin(Key,Hash,Content) LS组件 Content Lswrite 无缓存 Lsread (Key,Hash) 有缓存 模板插件 Key,Hash in Cookie
13. 架构演进 BAIDU INC. PAGE SEARCH FRONT END TEAM 基础模块 基础类库 功能模块 组件库 搜索前端 展现模块 服务模块
14. 前端架构 什么是前端架构 百度搜索前端架构 基础架构 展现架构演进 服务架构演进 小结 演进实践 极速搜索 性能平台 服务可用性 总结
15. 展现演进 BAIDU INC. PAGE SEARCH FRONT END TEAM 展现形式 200X 2012 2014
16. 展现演进 问题 BAIDU INC. PAGE SEARCH FRONT END TEAM 开发规模膨胀 实现效果:规范+组件 开发成本:平台化 模板管理 20人 200X 2012 550+卡片 150人 2017
17. 展现架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 展现卡片 开发者平台 组件库 规范 栅格库 栅格化规范 MMVM组件库 标准实现规范
18. 展现架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 展现卡片 开发者平台 组件库 规范 部署 在线开发 编译 预览 review 提测 栅格库 栅格化规范 MMVM组件库 标准实现规范
19. 展现架构 模块关系 BAIDU INC. PAGE SEARCH FRONT END TEAM 构建 卡片模板1 卡片模板2 卡片模板3 CSS 卡片模板2 A.merge({ JS Code }); 服务端 数据耦合 前端 实现依赖 栅格库 组件库 A.init();
20. 前端架构 什么是前端架构 百度搜索前端架构 基础架构 展现架构演进 服务架构演进 小结 演进实践 极速搜索 性能平台 服务可用性 总结
21. 服务化 链接下游 BAIDU INC. PAGE SEARCH FRONT END TEAM 单页异步应用 2014 2015
22. 服务化 什么是Superframe? BAIDU INC. PAGE SEARCH FRONT END TEAM
23. 服务化 Superframe是如何工作的? BAIDU INC. PAGE SEARCH FRONT END TEAM 劫持超链接点击事件,调用Service
24. 服务化 Superframe是如何工作的? BAIDU INC. PAGE SEARCH FRONT END TEAM 监听浏览器导航事件,调用Service
25. 服务化 Superframe主要对象关系图 BAIDU INC. PAGE SEARCH FRONT END TEAM
26. 服务化 Service BAIDU INC. PAGE SEARCH FRONT END TEAM 开发Service 1、继承 2、实现生命周期 3、注册 自定义实现服务接口、容器、过渡态、渲染
27. 服务化 Superframe模块架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 第三方服务 接入层 框架层 模块化基础设施 服务接口 通用 Service 百科 图片 百科 Service 图片 Service Superframe框架核心 AMD …… ……
28. 服务化 链接下游 BAIDU INC. PAGE SEARCH FRONT END TEAM ! 慢,抵达率低 ! 第三方站点的阅读体验
29. 服务化 链接下游 BAIDU INC. PAGE SEARCH FRONT END TEAM github.com/mipengine MIP-Cache MIP-HTML MIP-JS 3000站点 9亿 url 3.6亿
30. 服务模块架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 第三方服务 接入层 框架层 模块化基础设施 通用 Service 百科 图片 百科 Service 图片 Service Superframe框架核心 AMD MIP MIP Service …… ……
31. 百度搜索的前端架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 基础模块 展现模块 极速搜索 基本框架、类库 栅格化、组件库 构建方案 结构化 规范集合 服务模块 服务框架 团队:60人 开发者:150+ 各模块每天例行上线
32. 百度搜索的前端架构 总结 BAIDU INC. PAGE SEARCH FRONT END TEAM 百度搜索前端架构 平台化 服务化 产品 规范化 技术 生态共建 开发者
33. 前端架构 什么是前端架构 百度搜索前端架构 基础架构 展现架构演进 服务架构演进 小结 演进实践 极速搜索 性能平台 服务可用性 总结
34. 极速搜索 BAIDU INC. PAGE SEARCH FRONT END TEAM PC极速搜索 2014 输入过程中根据当前未完成检索词 结合大数据模型预测结果并展现 1800ms 900ms 平均预测成功率:47%(0ms) 移动极速搜索 2016 2017
35. 极速搜索 架构 BAIDU INC. PAGE SEARCH FRONT END TEAM 浏览器 预测模块 缓存模块 异步 Service 渲染模块 NGINX 策略模块 搜索服务 大数据模型
36. 极速搜索 问题 BAIDU INC. PAGE SEARCH FRONT END TEAM 机器、带宽消耗 速度 2.23每次预测成功平均只需要发送 个请求 1800ms 900ms
37. 极速搜索 问题 BAIDU INC. PAGE SEARCH FRONT END TEAM 预测有效性:预测成功pv / 整体pv 预测成功率:预测成功pv / 发送的预测pv 预测触发率:发送的预测pv / 可以发起预测的pv 预测覆盖率:可以发起预测的pv / pv 关注点分离 时间收益 机器带宽 预测有效性 = 预测成功率 * 预测触发率 * 预测覆盖率 HOW: 模型准确率提升 限制预测请求 更多预测场景
38. 极速搜索 Geek BAIDU INC. PAGE SEARCH FRONT END TEAM 更多预测场景 1 输入停顿预测 2 移动鼠标时预测(输入完成) 3 Hover时刻预测 4 粘贴预测 ! 预测成功率 37% 46% hover touch 400~600ms click
39. 极速搜索 Geek BAIDU INC. PAGE SEARCH FRONT END TEAM 限制预测请求 节省带宽和机器资源 1 Droplist 服务端复用缓存策略 hover touch 400~600ms click NGINX 预测策略控制模块 搜索服务
40. 极速搜索 Geek BAIDU INC. PAGE SEARCH FRONT END TEAM 限制预测请求 节省带宽和机器资源 1 Droplist 服务端复用缓存策略 (失效) hover touch click NGINX 预测策略控制模块 搜索服务
41. 极速搜索 Geek BAIDU INC. PAGE SEARCH FRONT END TEAM 限制预测请求 节省带宽和机器资源 1 Droplist 服务端复用缓存策略 2 Chunk Waitlist 前端屏蔽策略 hover touch 400~600ms 减少一次请求 click NGINX 预测策略控制模块 搜索服务
42. 极速搜索 Geek BAIDU INC. PAGE SEARCH FRONT END TEAM 限制预测请求 节省带宽和机器资源
43. 极速搜索 总结 BAIDU INC. PAGE SEARCH FRONT END TEAM 极速搜索架构 前端领域的极限探索 量化评价体系
44. 前端架构 什么是前端架构 百度搜索前端架构 基础架构 展现架构演进 服务架构演进 小结 演进实践 极速搜索 性能平台 服务可用性 总结
45. 性能平台 BAIDU INC. PAGE SEARCH FRONT END TEAM 展现 防退化 准入 数据分析 规范 优化调研 指标建设
46. 性能平台 首屏时间指标 BAIDU INC. PAGE SEARCH FRONT END TEAM 首屏时间 80分位点 服务端耗时:t3-t2 网络耗时:首屏时间-服务端-前端渲染 浏览器 网络 服务端 1 2 4 3 5
47. 性能平台 数据分析 BAIDU INC. PAGE SEARCH FRONT END TEAM 1 纵向维度 核心:首屏、网络、服务端、渲染 其他:前后端各个环节耗时 2 横向维度 主要维度:端、网络类型、抽样 次要维度:模板类型、地域、产品等 3 因子指标 预测比例、localstorage缓存使用率
48. 性能平台 数据分析 BAIDU INC. PAGE SEARCH FRONT END TEAM 4 相关性分析
49. 性能平台 数据分析 BAIDU INC. PAGE SEARCH FRONT END TEAM
50. 前端架构 什么是前端架构 百度搜索前端架构 基础架构 展现架构演进 服务架构演进 小结 演进实践 极速搜索 性能平台 服务可用性 总结
51. 服务可用性 BAIDU INC. PAGE SEARCH FRONT END TEAM 分级Case 监控 沙盒 监控 服务 监控 min 可用性 架构 降级 预案 兜底 容灾
52. 服务可用性 极速搜索 BAIDU INC. PAGE SEARCH FRONT END TEAM 3min 10s online 异步降级预案 预测降级预案 指标监控 前端兜底 监控预测流量、预测指标 在预案生效前牺牲性能保障服务
53. 前端架构 什么是前端架构 百度搜索前端架构 基础架构 展现架构演进 服务架构演进 小结 演进实践 极速搜索 性能平台 服务可用性 总结
54. Q&A BAIDU PAGE SEARCH FRONT END TEAM ?? ??