SlideShare una empresa de Scribd logo
1 de 39
Descargar para leer sin conexión
[object Object],[object Object],[object Object]
[object Object],[object Object]
实现
实战问题
展望
[object Object],[object Object],[object Object]
利用流水线思想降低网页的用户感知延迟
AJAX 模块化方式的性能加强版
[object Object]
[object Object]
[object Object]
[object Object],[object Object]
[object Object],[object Object]
[object Object],[object Object]
[object Object],[object Object]
<html>
<div id=&quot;pl_left&quot;>左侧内容</div>
<div id=&quot;pl_main&quot;>主要内容</div>
</html>
[object Object],[object Object]
<html>
<script src=&quot;BigPipe.js&quot;></script>
<div id=&quot;pl_left&quot;></div>
<div id=&quot;pl_main&quot;></div>
<script>bp.pagelet({'id': 'pl_left' , 'html' : ' 左侧内容 '})</script>
<script>bp.pagelet({'id': 'pl_main' , 'html' : ' 主要内容 '})</script>
</html>
[object Object],传统模式 (BP 关闭 ) 流水线模式 (BP 开启 ) 248ms => 70 ms
概念 ,[object Object],[object Object]
减少HTTP请求
Pagelet处理可并发 ,[object Object],[object Object]
数据请求层封装
部分运算移动到浏览器端
浏览器兼容性
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object]
《使用 BigPipe 提升浏览速度—流水线技术在新浪微博的实践》
吴侃 @v4ria
前端技术经理

Más contenido relacionado

Destacado

Unit 2: NUTRITION
Unit 2: NUTRITIONUnit 2: NUTRITION
Unit 2: NUTRITIONalfonsodios
 
AWSome Day Berlin 18.6.2014
AWSome Day Berlin 18.6.2014AWSome Day Berlin 18.6.2014
AWSome Day Berlin 18.6.2014tecRacer
 
anybuild/Hosting casual #1
anybuild/Hosting casual #1anybuild/Hosting casual #1
anybuild/Hosting casual #1Ryo Kuroda
 
電子書刺激擴大閱讀產業
電子書刺激擴大閱讀產業電子書刺激擴大閱讀產業
電子書刺激擴大閱讀產業Sophie Pang
 
Open Educational Resources: Policy Implications
Open Educational Resources: Policy ImplicationsOpen Educational Resources: Policy Implications
Open Educational Resources: Policy ImplicationsOystein Johannessen
 
Pirkanmaan toisen asteen tvt-suunnitelma ITK2014
Pirkanmaan toisen asteen tvt-suunnitelma ITK2014Pirkanmaan toisen asteen tvt-suunnitelma ITK2014
Pirkanmaan toisen asteen tvt-suunnitelma ITK2014Riikka Lehto (Vanninen)
 
Pedagogical Strategies for Worthwhile Learning in Online Environments
Pedagogical Strategies for Worthwhile Learning in Online EnvironmentsPedagogical Strategies for Worthwhile Learning in Online Environments
Pedagogical Strategies for Worthwhile Learning in Online EnvironmentsRamesh C. Sharma
 
Transformation or Transition
Transformation or TransitionTransformation or Transition
Transformation or TransitionMike Pounsford
 
Ne principles of islam
Ne principles of islamNe principles of islam
Ne principles of islamLoveofpeople
 
Lean Day: West recap (censored)
Lean Day: West recap (censored)Lean Day: West recap (censored)
Lean Day: West recap (censored)Taylor Meek
 
Маркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнесМаркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнесJustine Toms
 
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編kinneko
 
Бренд-комьюнити от Sitko.Ru (Brand-Community of Sitko.Ru)
Бренд-комьюнити от Sitko.Ru (Brand-Community of Sitko.Ru)Бренд-комьюнити от Sitko.Ru (Brand-Community of Sitko.Ru)
Бренд-комьюнити от Sitko.Ru (Brand-Community of Sitko.Ru)Serj Nazarov
 
Latvija 2030, NAP2020 un deklarācijas īstenošanas uzraudzības ziņojums
Latvija 2030, NAP2020 un deklarācijas īstenošanas uzraudzības ziņojumsLatvija 2030, NAP2020 un deklarācijas īstenošanas uzraudzības ziņojums
Latvija 2030, NAP2020 un deklarācijas īstenošanas uzraudzības ziņojumsPārresoru kordinācijas centrs (PKC)
 

Destacado (16)

Unit 2: NUTRITION
Unit 2: NUTRITIONUnit 2: NUTRITION
Unit 2: NUTRITION
 
AWSome Day Berlin 18.6.2014
AWSome Day Berlin 18.6.2014AWSome Day Berlin 18.6.2014
AWSome Day Berlin 18.6.2014
 
anybuild/Hosting casual #1
anybuild/Hosting casual #1anybuild/Hosting casual #1
anybuild/Hosting casual #1
 
電子書刺激擴大閱讀產業
電子書刺激擴大閱讀產業電子書刺激擴大閱讀產業
電子書刺激擴大閱讀產業
 
Open Educational Resources: Policy Implications
Open Educational Resources: Policy ImplicationsOpen Educational Resources: Policy Implications
Open Educational Resources: Policy Implications
 
Pirkanmaan toisen asteen tvt-suunnitelma ITK2014
Pirkanmaan toisen asteen tvt-suunnitelma ITK2014Pirkanmaan toisen asteen tvt-suunnitelma ITK2014
Pirkanmaan toisen asteen tvt-suunnitelma ITK2014
 
Pedagogical Strategies for Worthwhile Learning in Online Environments
Pedagogical Strategies for Worthwhile Learning in Online EnvironmentsPedagogical Strategies for Worthwhile Learning in Online Environments
Pedagogical Strategies for Worthwhile Learning in Online Environments
 
Transformation or Transition
Transformation or TransitionTransformation or Transition
Transformation or Transition
 
Ne principles of islam
Ne principles of islamNe principles of islam
Ne principles of islam
 
Lean Day: West recap (censored)
Lean Day: West recap (censored)Lean Day: West recap (censored)
Lean Day: West recap (censored)
 
Resume
ResumeResume
Resume
 
Маркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнесМаркетинг 2015 - основни правила за малкия и среден бизнес
Маркетинг 2015 - основни правила за малкия и среден бизнес
 
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編Unityを使ったVRアプリ作成入門 ABCD2015金沢編
Unityを使ったVRアプリ作成入門 ABCD2015金沢編
 
Бренд-комьюнити от Sitko.Ru (Brand-Community of Sitko.Ru)
Бренд-комьюнити от Sitko.Ru (Brand-Community of Sitko.Ru)Бренд-комьюнити от Sitko.Ru (Brand-Community of Sitko.Ru)
Бренд-комьюнити от Sitko.Ru (Brand-Community of Sitko.Ru)
 
Latvija 2030, NAP2020 un deklarācijas īstenošanas uzraudzības ziņojums
Latvija 2030, NAP2020 un deklarācijas īstenošanas uzraudzības ziņojumsLatvija 2030, NAP2020 un deklarācijas īstenošanas uzraudzības ziņojums
Latvija 2030, NAP2020 un deklarācijas īstenošanas uzraudzības ziņojums
 
ΒΑΚΑΛΟΥΔΗ - ΠΡΟΣΚΛΗΣΗ
ΒΑΚΑΛΟΥΔΗ - ΠΡΟΣΚΛΗΣΗΒΑΚΑΛΟΥΔΗ - ΠΡΟΣΚΛΗΣΗ
ΒΑΚΑΛΟΥΔΗ - ΠΡΟΣΚΛΗΣΗ
 

Similar a 新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙

使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocity使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocitykumawu
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发leneli
 
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度kumawu
 
程序组介绍Ver2.0
程序组介绍Ver2.0程序组介绍Ver2.0
程序组介绍Ver2.0vtmers2012
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践longhao
 
TBAD F2E 2010 review
TBAD F2E 2010 reviewTBAD F2E 2010 review
TBAD F2E 2010 reviewleneli
 
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训j5726
 
Css性能优化
Css性能优化Css性能优化
Css性能优化linxz
 
Talk about parser text from web pages(hunantv.com)
Talk about parser text from web pages(hunantv.com)Talk about parser text from web pages(hunantv.com)
Talk about parser text from web pages(hunantv.com)光风
 
让我们的页面跑得更快
让我们的页面跑得更快让我们的页面跑得更快
让我们的页面跑得更快li qiang
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京Joseph Chiang
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门Xiujun Ma
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考greengnn
 
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器iflytek
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展taobao.com
 
单页面开发遇到的一些问题
单页面开发遇到的一些问题单页面开发遇到的一些问题
单页面开发遇到的一些问题Zhi Zhong
 
网页设计及制作(Div+css)
网页设计及制作(Div+css)网页设计及制作(Div+css)
网页设计及制作(Div+css)lrk3
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 

Similar a 新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙 (20)

使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocity使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocity
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
 
程序组介绍Ver2.0
程序组介绍Ver2.0程序组介绍Ver2.0
程序组介绍Ver2.0
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
 
TBAD F2E 2010 review
TBAD F2E 2010 reviewTBAD F2E 2010 review
TBAD F2E 2010 review
 
给聚划算后端开发的前端培训
给聚划算后端开发的前端培训给聚划算后端开发的前端培训
给聚划算后端开发的前端培训
 
Jsp讲义
Jsp讲义Jsp讲义
Jsp讲义
 
Css性能优化
Css性能优化Css性能优化
Css性能优化
 
Talk about parser text from web pages(hunantv.com)
Talk about parser text from web pages(hunantv.com)Talk about parser text from web pages(hunantv.com)
Talk about parser text from web pages(hunantv.com)
 
让我们的页面跑得更快
让我们的页面跑得更快让我们的页面跑得更快
让我们的页面跑得更快
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
 
日新培训
日新培训日新培训
日新培训
 
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展
 
单页面开发遇到的一些问题
单页面开发遇到的一些问题单页面开发遇到的一些问题
单页面开发遇到的一些问题
 
网页设计及制作(Div+css)
网页设计及制作(Div+css)网页设计及制作(Div+css)
网页设计及制作(Div+css)
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 

Último

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

Último (15)

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

新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙