百度商业产品高性能前端架构探索.pdfVIP

百度商业产品高性能前端架构探索 欧阳先伟 Agenda 百度商业产品的特点 设计思路 ER （Enterprise RIA） ECUI （Enterprise Class UI ） Agenda 百度商业产品的特点 设计思路 ER （Enterprise RIA） ECUI （Enterprise Class UI ） 百度商业产品的特点 •  页面结构与风格容易体系化 •  用户站点停留时间长 •  单页面交互点众多，频繁的DOM动态创建与销毁 •  数据：处理量大，关系复杂，响应速度慢 Agenda 百度商业产品的特点 设计思路 ER （Enterprise RIA） ECUI （Enterprise Class UI ） 设计思路 性能 运行效率 开发效率 Agenda 百度商业产品的特点 设计思路 ER （Enterprise RIA） ECUI （Enterprise Class UI ） ER的整体介绍 富浏览器端web应用框架，适用于整站式的AJAX web应用 •  封装了hash变更页面不刷新的特性，支持前进后退历史记录堆栈与 URL敏感，自动完成location到Javascript Function的映射 •  数据环境的统⼀管理 •  前端模板管理html片段 •  MVC ，Action 的数据加载与视图渲染过程 ER的UI控制 •  模板中声明 •  自动创建与销毁UI控件 •  数据自动注入 •  数据变更，自动同步更新UI视图 Agenda 百度商业产品的特点 设计思路 ER （Enterprise RIA） ECUI （Enterprise Class UI ） ECUI的整体介绍 富浏览器端交互管理框架，适用于基于事件的复杂交互应用 •  集中的事件管理器与状态控制器 •  支持渲染前后的⼀致性 •  控件化的开发思想 •  基于交互行为的控件设计，通过组合与继承实现新的控件 ECUI的事件处理 Event UI Control Manager 控件状态 Status Pool 事件处理状态 ECUI的性能优化 ECUI对渲染步骤的分层次处理 批量操作 批量操作 批量操作 读取控件信息 填充控件结构 缓存控件信息 设置控件布局 ECUI的三种渲染模式 •  完全填充结构 •  部分填充结构 •  完全不填充结构 与EXT框架的比较 谢谢！ ouyangxianwei@