2012 淘宝D2技术沙龙
- 1. 去 儿网 前端性能优化及 发工具 @林浩_去 儿 hao.lin@qunar.com
- 2. About Me. ? 林浩 ? 前端 发工程师 ? @林浩_去 儿 ? hao.lin@qunar.com
- 3. Introduction. “去 儿网”是中国最早的旅游搜索引 擎,是目前全球最大的中文在线旅行网 站。 业务内容包括机票、酒店、团购、度 假、火车票、旅行等。
- 4. Part 1. Performance ? 分析业务现状 / 改变 ? 机票双程性能优化过程
- 5. 机票双程性能优化 ? 背景/问题分析 ? 大量使用ajax传递数据 ? 数据处理逻辑由前端完成 ? 业务/数据量增长10倍
- 6. 机票双程性能优化 ? 背景/问题分析 1. 接口数据量过大 抽样查询北京-上海，第一批数据加载情况： wait : 2.18s revice : 1.8s gzip : 783.7k ，未gzip：11.8M
- 7. 机票双程性能优化 ? 背景/问题分析 2. 前端解析数据慢 数据解析近2~3s，并导致页面卡死。?
- 8. 机票双程性能优化 ? 背景/问题分析 3. 前端计算量大 前端需要计算所有数据，得到 最低价排序 过滤项内容
- 9. 机票双程性能优化 ? 背景/问题分析 4. 数据加载 调用数据接口之前，必须先调用基础信息接口。
- 10. 机票双程性能优化 ? 优化思路 1. 接口拆分 将原数据接口拆分为２个 1) 提供所有航班信息及最低价的摘要接口 2) 提供指定航班详细信息数据接口，lazyload
- 11. 机票双程性能优化 ? 优化思路 2. 数据加载调整 将初始数据与基础信息接口合并，在第一时间调用/处 理
- 12. 机票双程性能优化 ? 优化思路 3. 重构前端核心部分代码 a. 删除低价计算部分，由后端提供低价摘要信息 b. 删除统计过滤项部分，由后端提供过滤项，并重新 实现数据过滤部分。
- 13. 机票双程性能优化 ? 优化结果 a. 接口拆分后，原数据接口由8M 为200k左右，并稳 定保持，不会由于业务增涨有过多波动。前端解析数据 时间可乎略不计。 b. 首屏处理数据及展示的时间不超过200ms c. 性能提升94.6%
- 15. Part 2. Tools ? 发/部署：qzz ? 监控：boomerang & cacti
- 16. 发/部署: qzz ? 命令行工具 ? 发环境 / 测试环境 / 线上环境 互切 ? 本地 发调试支持 ? 集成发布支持 ? 多系统支持
- 17. 发/部署: qzz ? 发环境 / 测试环境 / 线上环境 互切 qzz local qzz dev qzz prd
- 18. qzz prd qzz local
- 19. 发/部署: qzz ? 本地 发调试支持 ? 快速定位外网Bug ? 调试方便快捷 ? qzz sync
- 20. 发/部署: qzz ? 集成发布支持 ? qzz pack ? qzz min ? jslint ? 键字检查 ? 混淆 & 压缩
- 21. 发/部署: qzz ? 多系统支持 ? window ? linux ? mac
- 22. 监控：boomerang & cacti ? 前端监控要素 ? CDN ? 阻塞资源 ? 网络质量
- 24. 监控：boomerang & cacti boomerang https://github.com/yahoo/boomerang http://velocity.oreilly.com.cn/2011/ppts/Velocity-China- BettyTso-2011.pdf
- 25. 监控：boomerang & cacti t_start = user initiate a resource request t_done = that resource is completely available for user to interact with
- 26. Thanks.