SlideShare a Scribd company logo
1 of 33
使用BigPipe提升浏览速度




                微博平台-CDC-吴侃
           wukan@staff.sina.com.cn
概要




• 背景 – 基础概念
• BigPipe
• 回顾




              2
基本概念 – 流水线技术




 CPU的流水线技术 (Pipeline)




                        3
基础概念 – 低标量CPU的处理过程




• 低标量CPU的处理过程




                     4
基础概念 - CPU 的指令流水线技术




• 基本的流水线结构




                      5
基础概念 - Chunk




               Chunk


                       6
基础概念 - Chunk 和 Flush




• 在HTTP1.1中,使用trunked编码
  的浏览器丌需要等到内容全部下
  载完成,只要接收到一个chunked
  块就可解析页面
• Transfer-Encoding: chunked

                               7
基础概念 - Chunk 和 Flush




使用chunk的例子:
http://www.cnblogs.com/BearsTaR/archive/20
10/05/19/flush_chunk_encoding.html
flush让页面分块,逐步呈现




                                             8
1. BigPipe简介
2. BigPipe实践
3. BigPipe实践结果


                 9
为什么使用BigPipe

• 在FaceBook的使用中,将用户感受到的延迟
  时间降低一半。TTI(Time-to-Interact)




                             10
定义BigPipe

• BigPipe是一个重新设计的劢态网页服务体系。
• 将页面分解成一个个Pagelet,然后通过Web服
  务器和浏览器之间建立管道,进行分段输出
  (就像流水线)。
• BigPipe丌需要改变现有的网络浏览器或服务器。


                         11
基础概念 - Chunk 和 Flush




         BigPipe使服务器端并发处理




                            12
BigPipe带来什么

• PHP 无需等到页面所有 Pagelet 的API都读取
  执行完,才输出到浏览器,服务器端不浏
  览器端并行处理,加快了页面显示。
• Pagelet的输出顺序可以由PHP控制,及早输
  出用户关心的模块。

                             13
BigPipe带来什么
    服务器           网络   浏览器


  PageLet1   传输

  PageLet2      传输      浏览器

     PageLet3     传输

                              14
• BigPipe页面输出信息
• BigPipe的三种模式




                  15
切分页面




       16
输出信息
<body>
           <link rel="base.css" type="text/css" charset="utf-8" />
                                                                                    基础css和JavaScript
           <script type="text/javascript" charset="utf-8" src="base.js"></script>

           <div id='frame'><!--框架开始-->
                       <div id="top">...</div><!--顶部导航-->
                       <div id="menu">...</div><!--左侧-->
                       <div id="content"><!--此处为下面的PageLet占位-->
                                   <div id="pagelet_1"></div>
                                                                                    框架DIV
                                   <div id="pagelet_2"></div>
                       </div>
                       <div id="right">...</div>
                       <div id="bottom">...</div><!--底部-->
           </div><!--框架结束-->
</body>
<script type="text/javascript" charset="utf-8">
pl.v(html_ pagelet_1, "pagelet_1",[pagelet_1.css'], ["pagelet_1.js "]);             PageLet信息
</script>
……. //以下省略PageLet2、3等等


                                                                                                17
Php生成拼合好的页
PageLet1信息                               面html代码




•   Html:html_ pagelet_1,                 页面框架中的空
                                          DIV之ID
•   Box:"pagelet_1",
•   Css:['http://v4.com/pagelet_1.css'], CSS文件路径
•   Js: ["http://js.wcdn.cn/pagelet_1.js "]);    JS路径




                                                   18
19
BigPipe体系的三种模式
• 支持BigPipe
• 丌支持BigPipe
• 劢态刷新PageLet



                 20
支持BigPipe(默认模式)
• 根据PageLet的重要性产生和flush输出

• 过程:首先输出页面框架。然后由
  JavaScript填写和渲染页面内容




                            21
不支持BigPipe
• 页面丌支持JavaScript
• 或者丌在BigPipe体系下的页面

• 过程:页面由PHP直接产生及输出



                      22
动态更新PageLet
• 劢态切换页面,框架丌变,只更新PageLet

• 过程:PHP直接输出PageLet信息,JavaScript
  直接更新的现有框架上




                               23
(感谢李明同学手绘)
             24
更多细节:

https://svn1.intra.sina.com.cn/wei
bo/ria/t4/docs/技术文档/BigPipe



                                     25
• 普通方式




         26
• BigPipe方式




              27
使用的效果




• 下图是FaceBook传统模式和BigPipe性能数据
  比较图,该图显示BigPipe使用户在大多数
  浏览器中感受到的延迟减少了一半。




                            28
遇到的问题




• 劢态刷新页面,如何产生地址栏变化,浏
  览器的历叱记录




                       29
使用的范围




• BigPipe丌具备普适性
• 适用于:
1. 第一个请求时间较长
2. 页面上的劢态内容可以划分在多个区块内
   显示,且各个区块之间的关系丌大




                        30
将来




未来

• 超标量

• HTML5 Web Socket



                     31
32
总结回顾




•   BigPipe概念产生的背景
•   BigPipe技术的定义
•   BigPipe的实践过程
•   BigPipe的实践结果
•   BigPipe实践中遇到的问题以及适用范围
•   将来的发展



                            33

More Related Content

What's hot

webpack 入門
webpack 入門webpack 入門
webpack 入門Anna Su
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editortaobao.com
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践taobao.com
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路taobao.com
 
使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocity使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocitykumawu
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式Will Huang
 
KISSY Mechanism
KISSY MechanismKISSY Mechanism
KISSY Mechanismlifesinger
 
2018 8 18_play_framework
2018 8 18_play_framework2018 8 18_play_framework
2018 8 18_play_frameworkLorn Jhu
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Joseph Chiang
 
游戏专题重构实践
游戏专题重构实践游戏专题重构实践
游戏专题重构实践f2er
 
Intro-to-SeaJS
Intro-to-SeaJSIntro-to-SeaJS
Intro-to-SeaJSlifesinger
 
移动端Web开发性能优化实践
移动端Web开发性能优化实践移动端Web开发性能优化实践
移动端Web开发性能优化实践Mingel Zhang
 
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行Blazor 與 Radzen 同行
Blazor 與 Radzen 同行Jimmy Ho
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克jay li
 
Blazor Component 開發實戰
Blazor Component 開發實戰Blazor Component 開發實戰
Blazor Component 開發實戰Gelis Wu
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)beehivedata
 
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程洧杰 廖
 

What's hot (20)

webpack 入門
webpack 入門webpack 入門
webpack 入門
 
编辑器设计U editor
编辑器设计U editor编辑器设计U editor
编辑器设计U editor
 
Berserk js
Berserk jsBerserk js
Berserk js
 
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
 
使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocity使用Big pipe提升浏览速度 wk_velocity
使用Big pipe提升浏览速度 wk_velocity
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
 
KISSY Mechanism
KISSY MechanismKISSY Mechanism
KISSY Mechanism
 
2018 8 18_play_framework
2018 8 18_play_framework2018 8 18_play_framework
2018 8 18_play_framework
 
Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練Node.js 入門 - 前端工程開發實務訓練
Node.js 入門 - 前端工程開發實務訓練
 
游戏专题重构实践
游戏专题重构实践游戏专题重构实践
游戏专题重构实践
 
Intro-to-SeaJS
Intro-to-SeaJSIntro-to-SeaJS
Intro-to-SeaJS
 
移动端Web开发性能优化实践
移动端Web开发性能优化实践移动端Web开发性能优化实践
移动端Web开发性能优化实践
 
Blazor 與 Radzen 同行
Blazor 與 Radzen 同行Blazor 與 Radzen 同行
Blazor 與 Radzen 同行
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
 
Blazor Component 開發實戰
Blazor Component 開發實戰Blazor Component 開發實戰
Blazor Component 開發實戰
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
 
Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程Gulp.js 自動化前端任務流程
Gulp.js 自動化前端任務流程
 

Viewers also liked

Viewers also liked (6)

春雨路演
春雨路演春雨路演
春雨路演
 
独爽不如众乐
独爽不如众乐独爽不如众乐
独爽不如众乐
 
Html5
Html5Html5
Html5
 
目录结构规范
目录结构规范目录结构规范
目录结构规范
 
HTML5
HTML5HTML5
HTML5
 
Pure real natural
Pure real naturalPure real natural
Pure real natural
 

Similar to 使用Bigpipe提升浏览速度

淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践Du Yamin
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践jay li
 
前端性能测试
前端性能测试前端性能测试
前端性能测试tbmallf2e
 
2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇传贵 谢
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京Joseph Chiang
 
新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙
新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙
新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙slawdan
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发leneli
 
Big pipe backend2
Big pipe backend2Big pipe backend2
Big pipe backend2锐 张
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考greengnn
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践longhao
 
Template mb-kao
Template mb-kaoTemplate mb-kao
Template mb-kaoxwcoder
 
Axure RP Prototyping Tool
Axure RP Prototyping ToolAxure RP Prototyping Tool
Axure RP Prototyping ToolSouyi Yang
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
浏览器渲染与web前端开发
浏览器渲染与web前端开发浏览器渲染与web前端开发
浏览器渲染与web前端开发Duoyi Wu
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctechKai Cui
 
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, ChineseWebsite Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinesemultiple1902
 
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xBo-Yi Wu
 
前端性能优化&测试
前端性能优化&测试前端性能优化&测试
前端性能优化&测试tbmallf2e
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门Xiujun Ma
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰Scourgen Hong
 

Similar to 使用Bigpipe提升浏览速度 (20)

淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
前端性能测试
前端性能测试前端性能测试
前端性能测试
 
2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
 
新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙
新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙
新浪微博的BigPipe后端实现技术分享——11月26日淘宝aDev技术沙龙
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
Big pipe backend2
Big pipe backend2Big pipe backend2
Big pipe backend2
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
 
高性能网站最佳实践
高性能网站最佳实践高性能网站最佳实践
高性能网站最佳实践
 
Template mb-kao
Template mb-kaoTemplate mb-kao
Template mb-kao
 
Axure RP Prototyping Tool
Axure RP Prototyping ToolAxure RP Prototyping Tool
Axure RP Prototyping Tool
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
浏览器渲染与web前端开发
浏览器渲染与web前端开发浏览器渲染与web前端开发
浏览器渲染与web前端开发
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctech
 
Website Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, ChineseWebsite Pracice Focusing on UX, Chinese
Website Pracice Focusing on UX, Chinese
 
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.xIntroduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
 
前端性能优化&测试
前端性能优化&测试前端性能优化&测试
前端性能优化&测试
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
 

使用Bigpipe提升浏览速度