SlideShare a Scribd company logo
去哪儿网
前端性能优化及开发工具




              @ 林浩 _ 去哪儿
              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. 接口拆分

 将原数据接口拆分为2个
 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-China-Betty
监控: boomerang & cacti

t_start = user initiate a resource request
t_done = that resource is completely available for user to interact with
Thanks.

More Related Content

Viewers also liked

Universityof tokyo02032011tagumaoecd
Universityof tokyo02032011tagumaoecdUniversityof tokyo02032011tagumaoecd
Universityof tokyo02032011tagumaoecd
Deborah Roseveare
 
Presentatie MUG 27 juni 2013 - Graphite/New Relic
Presentatie MUG 27 juni 2013 - Graphite/New RelicPresentatie MUG 27 juni 2013 - Graphite/New Relic
Presentatie MUG 27 juni 2013 - Graphite/New RelicByte
 
[0312 조진현] good bye dx9
[0312 조진현] good bye dx9[0312 조진현] good bye dx9
[0312 조진현] good bye dx9진현 조
 
Frammenti Semantici
Frammenti SemanticiFrammenti Semantici
Frammenti Semantici
Salvatore Vassallo
 
Jomanu 05 03-12
Jomanu 05 03-12Jomanu 05 03-12
Jomanu 05 03-12
josemanuelieex3a
 
Poh 20 Beleidsvoering 4 29032011 Vs
Poh 20 Beleidsvoering 4 29032011 VsPoh 20 Beleidsvoering 4 29032011 Vs
Poh 20 Beleidsvoering 4 29032011 Vs
vera1973
 
1 Timothy 1 - Cassie Hesch
1 Timothy 1 - Cassie Hesch1 Timothy 1 - Cassie Hesch
1 Timothy 1 - Cassie Hesch
Nathan Hansen
 
Presentation data of savaMAK on library of the year 2012
Presentation data of savaMAK on library of the year 2012Presentation data of savaMAK on library of the year 2012
Presentation data of savaMAK on library of the year 2012Shinichiro Kumagai
 
2004 07 18 084010 Hung Vuong 3
2004 07 18 084010  Hung Vuong 32004 07 18 084010  Hung Vuong 3
2004 07 18 084010 Hung Vuong 3
Ngo Hung Long
 
Contexto histórico, sociológico y cultural de gustavo
Contexto histórico, sociológico y cultural de gustavoContexto histórico, sociológico y cultural de gustavo
Contexto histórico, sociológico y cultural de gustavo
oscaragora
 
2012-12-04_saveMLAKと名取市図書館支援
2012-12-04_saveMLAKと名取市図書館支援2012-12-04_saveMLAKと名取市図書館支援
2012-12-04_saveMLAKと名取市図書館支援Yuka Egusa
 
algebra
algebraalgebra
Blavatsky helena la voz del silencio
Blavatsky  helena   la voz del silencioBlavatsky  helena   la voz del silencio
Blavatsky helena la voz del silencio
Catalina Forero Acosta
 
モバイルとビッグデータで加速する公共交通の情報化
モバイルとビッグデータで加速する公共交通の情報化モバイルとビッグデータで加速する公共交通の情報化
モバイルとビッグデータで加速する公共交通の情報化
Masaki Ito
 
Sintesis informativa 27 06 2012
Sintesis informativa 27 06 2012Sintesis informativa 27 06 2012
Sintesis informativa 27 06 2012
megaradioexpress
 
二重疏洪道戰記 下
二重疏洪道戰記   下二重疏洪道戰記   下
二重疏洪道戰記 下
Wardson Jess
 

Viewers also liked (18)

Universityof tokyo02032011tagumaoecd
Universityof tokyo02032011tagumaoecdUniversityof tokyo02032011tagumaoecd
Universityof tokyo02032011tagumaoecd
 
卒研阿部愛里香
卒研阿部愛里香卒研阿部愛里香
卒研阿部愛里香
 
Presentatie MUG 27 juni 2013 - Graphite/New Relic
Presentatie MUG 27 juni 2013 - Graphite/New RelicPresentatie MUG 27 juni 2013 - Graphite/New Relic
Presentatie MUG 27 juni 2013 - Graphite/New Relic
 
[0312 조진현] good bye dx9
[0312 조진현] good bye dx9[0312 조진현] good bye dx9
[0312 조진현] good bye dx9
 
My cordovaprojectstory
My cordovaprojectstoryMy cordovaprojectstory
My cordovaprojectstory
 
Frammenti Semantici
Frammenti SemanticiFrammenti Semantici
Frammenti Semantici
 
Jomanu 05 03-12
Jomanu 05 03-12Jomanu 05 03-12
Jomanu 05 03-12
 
Poh 20 Beleidsvoering 4 29032011 Vs
Poh 20 Beleidsvoering 4 29032011 VsPoh 20 Beleidsvoering 4 29032011 Vs
Poh 20 Beleidsvoering 4 29032011 Vs
 
1 Timothy 1 - Cassie Hesch
1 Timothy 1 - Cassie Hesch1 Timothy 1 - Cassie Hesch
1 Timothy 1 - Cassie Hesch
 
Presentation data of savaMAK on library of the year 2012
Presentation data of savaMAK on library of the year 2012Presentation data of savaMAK on library of the year 2012
Presentation data of savaMAK on library of the year 2012
 
2004 07 18 084010 Hung Vuong 3
2004 07 18 084010  Hung Vuong 32004 07 18 084010  Hung Vuong 3
2004 07 18 084010 Hung Vuong 3
 
Contexto histórico, sociológico y cultural de gustavo
Contexto histórico, sociológico y cultural de gustavoContexto histórico, sociológico y cultural de gustavo
Contexto histórico, sociológico y cultural de gustavo
 
2012-12-04_saveMLAKと名取市図書館支援
2012-12-04_saveMLAKと名取市図書館支援2012-12-04_saveMLAKと名取市図書館支援
2012-12-04_saveMLAKと名取市図書館支援
 
algebra
algebraalgebra
algebra
 
Blavatsky helena la voz del silencio
Blavatsky  helena   la voz del silencioBlavatsky  helena   la voz del silencio
Blavatsky helena la voz del silencio
 
モバイルとビッグデータで加速する公共交通の情報化
モバイルとビッグデータで加速する公共交通の情報化モバイルとビッグデータで加速する公共交通の情報化
モバイルとビッグデータで加速する公共交通の情報化
 
Sintesis informativa 27 06 2012
Sintesis informativa 27 06 2012Sintesis informativa 27 06 2012
Sintesis informativa 27 06 2012
 
二重疏洪道戰記 下
二重疏洪道戰記   下二重疏洪道戰記   下
二重疏洪道戰記 下
 

Similar to 2012 淘宝技术沙龙 PPT

Data Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouseData Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouse
Jack Gao
 
淘宝双11双12案例分享
淘宝双11双12案例分享淘宝双11双12案例分享
淘宝双11双12案例分享
vanadies10
 
淘宝前端开发关键词
淘宝前端开发关键词淘宝前端开发关键词
淘宝前端开发关键词
jay li
 
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规yangdj
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践丁 宇
 
線上埋碼資料收集實作
線上埋碼資料收集實作線上埋碼資料收集實作
線上埋碼資料收集實作
FEG
 
去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验
mysqlops
 
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化丁 宇
 
陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路
yingganfei
 
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)锐 张
 
網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606Fionsu
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-applydiafly
 
Nodejs & NAE
Nodejs & NAENodejs & NAE
Nodejs & NAEq3boy
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node js
Xuefeng Zhang
 
大型互联网站性能优化
大型互联网站性能优化大型互联网站性能优化
大型互联网站性能优化丁 宇
 
移动互联网服务端架构介绍
移动互联网服务端架构介绍移动互联网服务端架构介绍
移动互联网服务端架构介绍
arganzheng
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰Scourgen Hong
 
金山云查询系统改进之路1
金山云查询系统改进之路1金山云查询系统改进之路1
金山云查询系统改进之路1
Zoom Quiet
 

Similar to 2012 淘宝技术沙龙 PPT (20)

Data Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouseData Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouse
 
淘宝双11双12案例分享
淘宝双11双12案例分享淘宝双11双12案例分享
淘宝双11双12案例分享
 
淘宝前端开发关键词
淘宝前端开发关键词淘宝前端开发关键词
淘宝前端开发关键词
 
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
 
線上埋碼資料收集實作
線上埋碼資料收集實作線上埋碼資料收集實作
線上埋碼資料收集實作
 
去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验
 
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
 
陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路
 
Berserk js
Berserk jsBerserk js
Berserk js
 
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
 
網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-app
 
Nodejs & NAE
Nodejs & NAENodejs & NAE
Nodejs & NAE
 
Full stack-development with node js
Full stack-development with node jsFull stack-development with node js
Full stack-development with node js
 
大型互联网站性能优化
大型互联网站性能优化大型互联网站性能优化
大型互联网站性能优化
 
移动互联网服务端架构介绍
移动互联网服务端架构介绍移动互联网服务端架构介绍
移动互联网服务端架构介绍
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
 
金山云查询系统改进之路1
金山云查询系统改进之路1金山云查询系统改进之路1
金山云查询系统改进之路1
 

2012 淘宝技术沙龙 PPT