本文讨论了去儿网的前端性能优化，分析了机票双程的性能问题和优化解决方案，通过接口拆分和数据加载调整，实现了94.6%的性能提升。同时，介绍了用于发部署和监控的工具，如qzz和boomerang。

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%

14. 机票双程性能优化
性能优化应与业务紧密结合

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
• 阻塞资源
• 网络质量

23. 监控：boomerang & cacti

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.