Enviar pesquisa
Carregar
2012 淘宝D2技术沙龙
•
7 gostaram
•
5,495 visualizações
L
lhqunar
Seguir
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 26
Baixar agora
Baixar para ler offline
Recomendados
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
lhqunar
百度新首页性能优化
百度新首页性能优化
Welefen Lee
DevOPS
DevOPS
mysqlops
从搜索到发现
从搜索到发现
zhu02
Ecm china
Ecm china
Saroj Bhandari
淘宝数据可视化[2010 SD2.0]
淘宝数据可视化[2010 SD2.0]
KennyZ
淘宝Hadoop数据分析实践
淘宝Hadoop数据分析实践
Min Zhou
淘宝数据库架构演进历程
淘宝数据库架构演进历程
zhaolinjnu
Mais conteúdo relacionado
Destaque
分布式缓存与队列
分布式缓存与队列
XiaoJun Hong
淘宝网的架构演进
淘宝网的架构演进
丁 宇
淘宝网前端应用与发展
淘宝网前端应用与发展
taobao.com
2011淘宝首页开发实践
2011淘宝首页开发实践
jay li
Taobao vs. eBay - The battle within the Chinese eCommerce market
Taobao vs. eBay - The battle within the Chinese eCommerce market
Yannick 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...
Ehud Barone
淘宝双11双12案例分享
淘宝双11双12案例分享
vanadies10
Alibaba taobao
Alibaba taobao
Raj Kumar Singh
Alibaba Vision and Mission
Alibaba Vision and Mission
Sook Yen Wong
Alibaba roadshow presentation
Alibaba roadshow presentation
Pierre Poignant
Memphis Police Dept
Memphis Police Dept
estotts75
The Alibaba Group Explained
The Alibaba Group Explained
Ranjan Roy
Apache Kylin: OLAP Engine on Hadoop - Tech Deep Dive
Apache Kylin: OLAP Engine on Hadoop - Tech Deep Dive
Xu Jiang
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淘宝首页开发实践
Taobao 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...
淘宝双11双12案例分享
淘宝双11双12案例分享
Alibaba taobao
Alibaba taobao
Alibaba Vision and Mission
Alibaba Vision and Mission
Alibaba roadshow presentation
Alibaba roadshow presentation
Memphis Police Dept
Memphis Police Dept
The Alibaba Group Explained
The Alibaba Group Explained
Apache 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?
Semelhante a 2012 淘宝D2技术沙龙
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
lhqunar
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规
yangdj
線上埋碼資料收集實作
線上埋碼資料收集實作
FEG
Data Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouse
Jack Gao
Yog Framework
Yog Framework
fansekey
去哪儿平台技术
去哪儿平台技术
d0nn9n
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
丁 宇
Berserk js
Berserk js
taobao.com
陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路
yingganfei
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
丁 宇
淘宝前端开发关键词
淘宝前端开发关键词
jay li
去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验
mysqlops
美团前端架构简介
美团前端架构简介
pan weizeng
移动互联网服务端架构介绍
移动互联网服务端架构介绍
arganzheng
資安健檢因應配套
資安健檢因應配套
Galaxy Software Services
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
Scourgen Hong
金山云查询系统改进之路1
金山云查询系统改进之路1
Zoom Quiet
網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606
Fionsu
线上问题排查交流
线上问题排查交流
Edward Lee
百姓网如何优化网速-Qcon2011
百姓网如何优化网速-Qcon2011
Yiwei Ma
Semelhante a 2012 淘宝D2技术沙龙
(20)
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规
線上埋碼資料收集實作
線上埋碼資料收集實作
Data Analyse Black Horse - ClickHouse
Data Analyse Black Horse - ClickHouse
Yog Framework
Yog Framework
去哪儿平台技术
去哪儿平台技术
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
Berserk js
Berserk js
陈桂鸿 Ak--手机qq hybrid-app优化新思路
陈桂鸿 Ak--手机qq hybrid-app优化新思路
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
淘宝前端开发关键词
淘宝前端开发关键词
去哪儿Ugc平台设计经验
去哪儿Ugc平台设计经验
美团前端架构简介
美团前端架构简介
移动互联网服务端架构介绍
移动互联网服务端架构介绍
資安健檢因應配套
資安健檢因應配套
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
金山云查询系统改进之路1
金山云查询系统改进之路1
網頁弱點掃描服務簡報 20120606
網頁弱點掃描服務簡報 20120606
线上问题排查交流
线上问题排查交流
百姓网如何优化网速-Qcon2011
百姓网如何优化网速-Qcon2011
Último
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
Jamie (Taka) Wang
Entities in DCPS (DDS)
Entities in DCPS (DDS)
Jamie (Taka) Wang
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
黑客 接单【TG/微信qoqoqdqd】
20200323 - AI Intro
20200323 - AI Intro
Jamie (Taka) Wang
20161027 - edge part2
20161027 - edge part2
Jamie (Taka) Wang
20161220 - domain-driven design
20161220 - domain-driven design
Jamie (Taka) Wang
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
NCU MCL
20151111 - IoT Sync Up
20151111 - IoT Sync Up
Jamie (Taka) Wang
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
NCU MCL
20170104 - transaction_pattern
20170104 - transaction_pattern
Jamie (Taka) Wang
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
NCU MCL
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
NCU MCL
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
NCU MCL
20200226 - AI Overview
20200226 - AI Overview
Jamie (Taka) Wang
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
NCU MCL
Último
(15)
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
Entities in DCPS (DDS)
Entities in DCPS (DDS)
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
20200323 - AI Intro
20200323 - AI Intro
20161027 - edge part2
20161027 - edge part2
20161220 - domain-driven design
20161220 - domain-driven design
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
20151111 - IoT Sync Up
20151111 - IoT Sync Up
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
20170104 - transaction_pattern
20170104 - transaction_pattern
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
20200226 - AI Overview
20200226 - AI Overview
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
2012 淘宝D2技术沙龙
1.
去
儿网 前端性能优化及 发工具 @林浩_去 儿 hao.lin@qunar.com
2.
About Me. • 林浩 •
前端 发工程师 • @林浩_去 儿 • hao.lin@qunar.com
3.
Introduction. “去
儿网”是中国最早的旅游搜索引 擎,是目前全球最大的中文在线旅行网 站。 业务内容包括机票、酒店、团购、度 假、火车票、旅行等。
4.
Part 1. Performance •
分析业务现状 / 改变 • 机票双程性能优化过程
5.
机票双程性能优化 • 背景/问题分析 •
大量使用ajax传递数据 • 数据处理逻辑由前端完成 • 业务/数据量增长10倍
6.
机票双程性能优化 • 背景/问题分析 1.
接口数据量过大 抽样查询北京-上海,第一批数据加载情况: wait : 2.18s revice : 1.8s gzip : 783.7k ,未gzip:11.8M
7.
机票双程性能优化 • 背景/问题分析 2.
前端解析数据慢 数据解析近2~3s,并导致页面卡死。
8.
机票双程性能优化 • 背景/问题分析 3.
前端计算量大 前端需要计算所有数据,得到 最低价排序 过滤项内容
9.
机票双程性能优化 • 背景/问题分析 4.
数据加载 调用数据接口之前,必须先调用基础信息接口。
10.
机票双程性能优化 • 优化思路 1.
接口拆分 将原数据接口拆分为2个 1) 提供所有航班信息及最低价的摘要接口 2) 提供指定航班详细信息数据接口,lazyload
11.
机票双程性能优化 • 优化思路 2.
数据加载调整 将初始数据与基础信息接口合并,在第一时间调用/处 理
12.
机票双程性能优化 • 优化思路 3.
重构前端核心部分代码 a. 删除低价计算部分,由后端提供低价摘要信息 b. 删除统计过滤项部分,由后端提供过滤项,并重新 实现数据过滤部分。
13.
机票双程性能优化 • 优化结果 a. 接口拆分后,原数据接口由8M
为200k左右,并稳 定保持,不会由于业务增涨有过多波动。前端解析数据 时间可乎略不计。 b. 首屏处理数据及展示的时间不超过200ms c. 性能提升94.6%
14.
机票双程性能优化 性能优化应与业务紧密结合
15.
Part 2. Tools •
发/部署:qzz • 监控:boomerang & cacti
16.
发/部署: qzz • 命令行工具 •
发环境 / 测试环境 / 线上环境 互切 • 本地 发调试支持 • 集成发布支持 • 多系统支持
17.
发/部署: qzz •
发环境 / 测试环境 / 线上环境 互切 qzz local qzz dev qzz prd
18.
qzz prd
qzz local
19.
发/部署: qzz • 本地
发调试支持 • 快速定位外网Bug • 调试方便快捷 • qzz sync
20.
发/部署: qzz • 集成发布支持
• qzz pack • qzz min • jslint • 键字检查 • 混淆 & 压缩
21.
发/部署: qzz • 多系统支持
• window • linux • mac
22.
监控:boomerang & cacti •
前端监控要素 • CDN • 阻塞资源 • 网络质量
23.
监控:boomerang & cacti
24.
监控:boomerang & cacti
boomerang https://github.com/yahoo/boomerang http://velocity.oreilly.com.cn/2011/ppts/Velocity-China- BettyTso-2011.pdf
25.
监控:boomerang & cacti t_start
= user initiate a resource request t_done = that resource is completely available for user to interact with
26.
Thanks.
Notas do Editor
\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
Baixar agora