去哪儿网林浩 _ 去哪儿 About Me. 林浩林浩 _ 去哪儿

去哪儿网前端性能优化及开发工具 @ 林浩 _ 去哪儿 hao.lin@qunar.com

About Me. 林浩前端开发工程师 @ 林浩 _ 去哪儿 hao.lin@qunar.com

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 https://github.com/yahoo/boomerang http://velocity.oreilly.com.cn/2011/ppts/Velocity-China- BettyTso-2011.pdf

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

Thanks.

Presentation on theme: "去哪儿网林浩 _ 去哪儿 About Me. 林浩林浩 _ 去哪儿"— Presentation transcript: