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