搜索组件化的探索与实践

微风

2019/03/24 发布于 技术 分类

文字内容
1. 搜索组件化探索与实践 陈骁 百度
2. 陈骁 在此键⼊入Tittle
3. Why?
4. 搜索体验升级 Before After Before After
5. 卡⽚片1 卡⽚片2 卡⽚片3 …
6. ⽬目标 • 提⾼高开发效率 横向团队 基础组件 组合 卡⽚片 ∞ 业务接⼊入 团队 排列列 搜索结果
7. 不不可缺少 • ⾸首屏 • 稳定 • ⾼高效
8. How?
9. 组件源码
10. 基础渲染框架 组件源码 Offline 编译器器 服务器器端 数据 浏览器器端 PHP 组件 javascript 组件 数据 Online server runtime browser runtime HTML string HTML DOM
11. 流程示意图 Offline Online single file component html 同构逻辑 template Card.php server runtime HTML String config Hydrate 样式 style 纯前端逻辑 script Card.js vue.runtime.js DOM、Events ……
12. Hello 模版处理理 模版语法解析器器 抽象语法树(AST) PHP 代码⽣生成器器 $ctx->_c( ‘c-dialog’, array(‘staticClass’ => ‘example’), array( $ctx->_s(‘Hello’), $ctx->_c(‘span’) ) ) Javascript 代码⽣生成器器 _vm._c(‘dialog’, {staticClass: ‘example’}, [ _vm._v(‘Hello’), _vm._c(‘span’, {on: {click: _vm.onClick}}) ])
13. 表达式处理理 a+b>2 Javascript 语法解析器器 a+b>2 a a+b > + b PHP 代码⽣生成器器 $ctx->_a($ctx->_d[“a”], $ctx->_d[“b”]) > 2 2 抽象语法树(AST) Javascript 代码⽣生成器器 this.a + this.b > 2
14. 初步收益 • 开发效率提升 • 保证体验⼀一致性 • 横向升级成本降低 • MVVM
15. 探索 实践
16. 服务器器端渲染性能问题
17. 服务器器端性能优化 • 框架层:直接⽣生成 HTML 字符串串,减少⼀一次递归 状态初始化 render 虚拟 DOM 树 状态初始化 render HTML 字符串串 HTML 字符串串 Before After
18. 服务器器端性能优化 • 基础组件层:模版编译过程优化 • • ⾃自定义组件:组件加载 > 初始化 > render 普通 DOM:字符串串拼接 template source code HTML parser AST Element Code Generator postTransformNode (el.tag = ‘div’) optimized PHP Code AST
19. Before $ctx->_c(“c-row”, array( “staticClass” => “example” ), …) • After “
_ssrClass( “example”, array( “c-row” => true ) ) . “>” . (…) . “
” 逻辑简单的基础组件,在编译阶段就⽣生成普通 dom
20. 服务器器端性能优化 • 业务层:⾮非⾸首屏部分(Tab、Pager…)不不在服务器器端渲染 server Vnode Tree browser Hydrate • 先验⼯工具、线上监控和报警 Mounted
21. 服务器器端性能优化 • 优化效果 5.6 ms 2.6 ms
22. 服务器器端渲染性能优化的⼀一般思路路 1. 耗时分析 2. 线上逻辑移到线下 3. 空间换时间
23. 浏览器器端性能优化 • ⾸首⻚页预取 • 端预取 • ⾸首屏预取 • Js parse > Json parse
24. 迭代效率问题 横向(运⾏行行时、基础组件)迭代效率和整体稳定性的⽭矛盾
25. 搜索前端业务模块 业务 卡⽚片 横向 垂搜 ⾸首⻚页 基础组件库 运⾏行行时 • 横向迭代⽅方式:版本隔离 搜索框 …
26. 提升横向迭代效率 • 服务器器端运⾏行行时 加载组件配置 获取编译器器版本号:runtime_xxxxxx new Atom\runtime_xxxxxx\Atom_Component()
27. 提升横向迭代效率 • 服务器器端运⾏行行时:版本隔离 Component A compiler v1 & runtime v1 Component B compiler v2 & runtime v2 Component D compiler v1 & runtime v1 Component C compiler v3 & runtime v3
28. 提升横向迭代效率 • 基础组件库 基础组件库 npm publish npm registry module server module rules search-ui/Button/Button A search-ui/v1.0.1/Button/Button.php B search-ui/v1.1.2/Button/Button.php Module Resolver
29. 版本隔离收益 • 实现各业务模块分散管理理 • 运⾏行行时迭代周期缩短 50%,⻛风险可控 • 基础组件库迭代效率提升
30. Atom 搜索组件化渲染框架
31. 搜索组件化技术全景图 应⽤用 卡⽚片 (mobile/pc/dueros) ⼯工程 垂搜 搜索敏敏捷平台 ⾸首⻚页 搜索框 … 开发⼯工具集 框架 Atom Runtime search-ui 组件库 VSL(语⾳音交互) Webb(⽇日志) 服务 性能监控 前后端异常监控 组件版本管理理 ⽇日志统计 规范 Web ⽆无障碍 搜索前端设计规范 性能准⼊入规范 代码规范
32. • Web ⽆无障碍 Before After
33. • 语⾳音交互(VSL)
34. • 监控 异常 性能
35. • 未来规划 • 搜索交互体验升级 • 渲染层迁移 nodejs • PC和移动端体验打平 • 搜索智能化输出 • ……
36. 陈骁 在此键⼊入Tittle
37. 陈骁 在此键⼊入Tittle