Transcript 1. 接口拆分

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