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-Betty

25. 监控： boomerang & cacti
t_start = user initiate a resource request
t_done = that resource is completely available for user to interact with

26. Thanks.