2012 淘宝D2技术沙龙

15,342 views
16,108 views

Published on

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
15,342
On SlideShare
0
From Embeds
0
Number of Embeds
13,094
Actions
Shares
0
Downloads
88
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 2012 淘宝D2技术沙龙

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

    ×