SlideShare uma empresa Scribd logo
1 de 26
Baixar para ler offline
去    儿网
前端性能优化及   发工具




                @林浩_去 儿
                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-
                    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.

Mais conteúdo relacionado

Destaque

分布式缓存与队列
分布式缓存与队列分布式缓存与队列
分布式缓存与队列XiaoJun Hong
 
淘宝网的架构演进
淘宝网的架构演进淘宝网的架构演进
淘宝网的架构演进丁 宇
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展taobao.com
 
2011淘宝首页开发实践
2011淘宝首页开发实践2011淘宝首页开发实践
2011淘宝首页开发实践jay li
 
Taobao vs. eBay - The battle within the Chinese eCommerce market
Taobao vs. eBay - The battle within the Chinese eCommerce marketTaobao vs. eBay - The battle within the Chinese eCommerce market
Taobao vs. eBay - The battle within the Chinese eCommerce marketYannick Pinkinelli
 
Bill Gates patent and 3 pending patents coming to disrupt affiliates model by...
Bill Gates patent and 3 pending patents coming to disrupt affiliates model by...Bill Gates patent and 3 pending patents coming to disrupt affiliates model by...
Bill Gates patent and 3 pending patents coming to disrupt affiliates model by...Ehud Barone
 
淘宝双11双12案例分享
淘宝双11双12案例分享淘宝双11双12案例分享
淘宝双11双12案例分享vanadies10
 
Alibaba Vision and Mission
Alibaba Vision and MissionAlibaba Vision and Mission
Alibaba Vision and MissionSook Yen Wong
 
Alibaba roadshow presentation
Alibaba roadshow presentationAlibaba roadshow presentation
Alibaba roadshow presentationPierre Poignant
 
Memphis Police Dept
Memphis Police DeptMemphis Police Dept
Memphis Police Deptestotts75
 
The Alibaba Group Explained
The Alibaba Group ExplainedThe Alibaba Group Explained
The Alibaba Group ExplainedRanjan Roy
 
Apache Kylin: OLAP Engine on Hadoop - Tech Deep Dive
Apache Kylin: OLAP Engine on Hadoop - Tech Deep DiveApache Kylin: OLAP Engine on Hadoop - Tech Deep Dive
Apache Kylin: OLAP Engine on Hadoop - Tech Deep DiveXu Jiang
 
E-commerce trends 2014: what can we learn from China?
E-commerce trends 2014: what can we learn from China? E-commerce trends 2014: what can we learn from China?
E-commerce trends 2014: what can we learn from China? Ogilvy Consulting
 

Destaque (14)

分布式缓存与队列
分布式缓存与队列分布式缓存与队列
分布式缓存与队列
 
淘宝网的架构演进
淘宝网的架构演进淘宝网的架构演进
淘宝网的架构演进
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展
 
2011淘宝首页开发实践
2011淘宝首页开发实践2011淘宝首页开发实践
2011淘宝首页开发实践
 
Taobao vs. eBay - The battle within the Chinese eCommerce market
Taobao vs. eBay - The battle within the Chinese eCommerce marketTaobao vs. eBay - The battle within the Chinese eCommerce market
Taobao vs. eBay - The battle within the Chinese eCommerce market
 
Bill Gates patent and 3 pending patents coming to disrupt affiliates model by...
Bill Gates patent and 3 pending patents coming to disrupt affiliates model by...Bill Gates patent and 3 pending patents coming to disrupt affiliates model by...
Bill Gates patent and 3 pending patents coming to disrupt affiliates model by...
 
淘宝双11双12案例分享
淘宝双11双12案例分享淘宝双11双12案例分享
淘宝双11双12案例分享
 
Alibaba taobao
Alibaba taobaoAlibaba taobao
Alibaba taobao
 
Alibaba Vision and Mission
Alibaba Vision and MissionAlibaba Vision and Mission
Alibaba Vision and Mission
 
Alibaba roadshow presentation
Alibaba roadshow presentationAlibaba roadshow presentation
Alibaba roadshow presentation
 
Memphis Police Dept
Memphis Police DeptMemphis Police Dept
Memphis Police Dept
 
The Alibaba Group Explained
The Alibaba Group ExplainedThe Alibaba Group Explained
The Alibaba Group Explained
 
Apache Kylin: OLAP Engine on Hadoop - Tech Deep Dive
Apache Kylin: OLAP Engine on Hadoop - Tech Deep DiveApache Kylin: OLAP Engine on Hadoop - Tech Deep Dive
Apache Kylin: OLAP Engine on Hadoop - Tech Deep Dive
 
E-commerce trends 2014: what can we learn from China?
E-commerce trends 2014: what can we learn from China? E-commerce trends 2014: what can we learn from China?
E-commerce trends 2014: what can we learn from China?
 

Semelhante a 2012 淘宝D2技术沙龙

2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPTlhqunar
 
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规yangdj
 
線上埋碼資料收集實作
線上埋碼資料收集實作線上埋碼資料收集實作
線上埋碼資料收集實作FEG
 
Data Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouseData Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouseJack Gao
 
Yog Framework
Yog FrameworkYog Framework
Yog Frameworkfansekey
 
去哪儿平台技术
去哪儿平台技术去哪儿平台技术
去哪儿平台技术d0nn9n
 
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化丁 宇
 
陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路yingganfei
 
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践丁 宇
 
淘宝前端开发关键词
淘宝前端开发关键词淘宝前端开发关键词
淘宝前端开发关键词jay li
 
去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验mysqlops
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 
移动互联网服务端架构介绍
移动互联网服务端架构介绍移动互联网服务端架构介绍
移动互联网服务端架构介绍arganzheng
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰Scourgen Hong
 
金山云查询系统改进之路1
金山云查询系统改进之路1金山云查询系统改进之路1
金山云查询系统改进之路1Zoom Quiet
 
網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606Fionsu
 
线上问题排查交流
线上问题排查交流线上问题排查交流
线上问题排查交流Edward Lee
 
百姓网如何优化网速-Qcon2011
百姓网如何优化网速-Qcon2011百姓网如何优化网速-Qcon2011
百姓网如何优化网速-Qcon2011Yiwei Ma
 

Semelhante a 2012 淘宝D2技术沙龙 (20)

2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
 
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规
 
線上埋碼資料收集實作
線上埋碼資料收集實作線上埋碼資料收集實作
線上埋碼資料收集實作
 
Data Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouseData Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouse
 
Yog Framework
Yog FrameworkYog Framework
Yog Framework
 
去哪儿平台技术
去哪儿平台技术去哪儿平台技术
去哪儿平台技术
 
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
 
Berserk js
Berserk jsBerserk js
Berserk js
 
陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路
 
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
 
淘宝前端开发关键词
淘宝前端开发关键词淘宝前端开发关键词
淘宝前端开发关键词
 
去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
移动互联网服务端架构介绍
移动互联网服务端架构介绍移动互联网服务端架构介绍
移动互联网服务端架构介绍
 
資安健檢因應配套
資安健檢因應配套資安健檢因應配套
資安健檢因應配套
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
 
金山云查询系统改进之路1
金山云查询系统改进之路1金山云查询系统改进之路1
金山云查询系统改进之路1
 
網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606
 
线上问题排查交流
线上问题排查交流线上问题排查交流
线上问题排查交流
 
百姓网如何优化网速-Qcon2011
百姓网如何优化网速-Qcon2011百姓网如何优化网速-Qcon2011
百姓网如何优化网速-Qcon2011
 

Último

20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLPJamie (Taka) Wang
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven designJamie (Taka) Wang
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_patternJamie (Taka) Wang
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 

Último (15)

20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
 
Entities in DCPS (DDS)
Entities in DCPS (DDS)Entities in DCPS (DDS)
Entities in DCPS (DDS)
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
20200323 - AI Intro
20200323 - AI Intro20200323 - AI Intro
20200323 - AI Intro
 
20161027 - edge part2
20161027 - edge part220161027 - edge part2
20161027 - edge part2
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven design
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
20151111 - IoT Sync Up
20151111 - IoT Sync Up20151111 - IoT Sync Up
20151111 - IoT Sync Up
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_pattern
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
20200226 - AI Overview
20200226 - AI Overview20200226 - AI Overview
20200226 - AI Overview
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 

2012 淘宝D2技术沙龙

Notas do Editor

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n