一、什么是bigpipe

　　Bigpipe是Facebook工程师提出了一种新的页面加载技术。

　　BigPipe是一个重新设计的基础动态网页服务体系。大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程：多重指令管线通过不同的处理器执行单元，以达到性能的最佳。虽然BigPipe是对现有的服务网络基础过程的重新设计，但它却不需要改变现有的网络浏览器或服务器，它完全使用PHP和JavaScript来实现。

二、Bigpipe思想及原理

　　要利用该Web服务器和浏览器之间的并行性，BigPipe首先分解网页成多个可调用的Pagelets。正如流水线微处理器划分一个指令的生命周期为（如“取指令”，“指令解码”，“执行”，“写回寄存器”等）多个阶段，BigPipe的页面生成过程分为以下几个阶段：

1. 请求解析：Web服务器解析和完整性检查的HTTP请求。
2. 数据获取：Web服务器从存储层获取数据。
3. 标记生成：Web服务器生成的响应的HTML标记。
4. 网络传输：响应从Web服务器传送到浏览器。
5. CSS的下载：浏览器下载网页的CSS的要求。
6. DOM树结构和CSS样式：浏览器构造的DOM文档树，然后应用它的CSS规则。
7. JavaScript中下载：浏览器下载网页中JavaScript引用的资源。
8. JavaScript执行：浏览器的网页执行JavaScript代码。

　　前三个阶段执行，由Web服务器，最后四个阶段是由浏览器执行。每个Pagelet必须经过所有这些阶段顺序，但BigPipe在不同的阶段使几个Pagelets同时执行。


（Facebook主页的Pagelets，每个矩形对应一个Pagelet。）

　　上面的图片使用Facebook主页为例子来说明如何将网页是分解成Pagelets。该主页包括几个Pagelets：“作者Pagelet”，“导航Pagelet”，“新闻动态Pagelet”，“请求框Pagelet”，“广告pagelet”，“朋友推荐”和“联系”等他们是相互独立的。当“导航Pagelet”显示给用户，“新闻动态Pagelet”仍然可以在服务器上正在生成。

　　在BigPipe，一个用户请求的生命周期是这样的：在浏览器发送一个HTTP请求到Web服务器。在收到的HTTP请求，并在上面进行一些全面的检查，网站服务器立即发回一个未关闭的HTML文件，其中包括一个HTML 标签和标签的开始标签。标签包括BigPipe的JavaScript库来解析Pagelet以后收到的答复。在标签，有一个模板，它指定了页面的逻辑结构和Pagelets占位符。例如:

　　渲染后的第一个反应到客户端，Web服务器继续一个接一个生成Pagelets只要一个Pagelet生成，他将立即刷新到客户端在一个JSON编码的对象，包括所有的CSS，JavaScript的pagelet，它的HTML内容，以及一些元数据所需的资源。例如:

　　在客户端在收到Pagelet通过“onPageletArrive”发出的指令，BigPipe的JavaScript库将首先下载它的CSS资源；在CSS资源被下载完成后，BigPipe将在Pagelet的标记HTML显示它的innerHTML。多个Pagelets的CSS可在同一时间下载，它们可以根据其各自CSS的下载完成情况来确认显示顺序。在BigPipe中，JavaScript资源的优先级低于CSS和页面内容。因此，BigPipe不会在所有Pagelets显示出来之前下载任何Pagelet中的JavaScript。然后，所有Pagelets的JavaScript异步下载。最后Pagelet的JavaScript初始化代码根据其各自的下载完成情况来确定执行顺序。

　　这种高度并行系统的最终结果是，多个Pageletsr的不同执行阶段同时进行。例如，浏览器可以正在下载三个Pagelets CSS的资源，同时已经显示另一Pagelet内容，与此同时，服务器也在生成新的Pagelet。从用户的角度来看，页面是逐步呈现的。最开始的网页内容会更快的显示，这大大减少了用户的对页面延时的感知。如果您要自己亲眼看到区别，你可以尝试以下连结： 传统模式和BigPipe。第一个链接是传统模式单一模式显示页面。第二个链接是BigPipe管道模式的页面。如果您的浏览器版本比较老，网速也很慢，浏览器缓存不佳，哪么两页之间的加截时间差别将更加明显。

三、实现细节

　　具体实现如下：当用户访问该页面 时，在第一个flush 的Response 内容中，返回大部分的HTML 代码，包括完整的<heaad>标签，和一个未封闭的<body>，其中<head>标签中有需要导入的文件的路 径，如一些公共的css 文件和BigPipe.js 文件，<body>标签有页面的主要布局，第二块flush 的内容为一段js脚本，处理BigPipe 对象的生成，以及js 和css 文件的路径和字符串的映射

var bigPipe = new bigPipe();

bigPipe.setResourceMap({

aaaaa:{

“name”: “js/list1.js”,

“type”: “js”,

“src”: “js/list1.js”

}

);

　　setResourceMap(json)为 BigPipe 中的函数，功能是设置文件的映射。”aaaaa”应该是在服务器随即生成的五位字符串,name表示文件名称，type 为文件的类型，可以是”js”或”css”，”src”为文件的路径。在下面的页面中，就可以使用”aaaaa”来替代”js/list1.js”了，减 少了复杂性。接下来flush 的是每一个pagelet 的内容了，例如：

<script type=”text/javascript” >

bigPipe.onPageletArrive({

id:”list1″,

content:”this is list 1 <\/br><img src =\”img13.jpg\” \/>”,

css:["eeeee"],

js:["aaaaa"],

“resource_map”:{

aaaaa:{

“name”: “js/list1.js”,

“type”: “js”,

“src”: “js/list1.js”

} ,

“eeeee”: {

“name”: “css/list1.css”,

“type”: “css”

“src”: “css/list1.css”

}

}

});

</script>

　　onPageletArrive（json_arrive） 也是BigPipe 的函数，功能是动态添加页面的内容和加载pagelet 所需的文件，函数的参数为json 格式的数据。其参数含义是：“id”用来寻找pagelet 标签；“ content ”是html 页面内容，在找到对应的pagelet 的标签之后，将content 内动态添加到html 页面中；“css”为该Pagelet 所需的css 文件，这里的css 文件可能在之前导入过了；“js”为该pagelet 所需的js 文件，同样，有可能在之前的pagelet已经导入过了。在函数实现过程中，因为js 文件是最后加载的，可以把这些js 的路径存入到一个数组当中（去掉重复的），在最后一起加载。resource_map”为该pagelet 所单独需要加载的js 和css 文件，同样也是json 格式的，结构与前面的setResource()中的参数一样。最后flush 的是

</body>

</html>

即为最后的标签。

四、结论

　　经过上面的讨论，我们可以发现，使用BigPipe 技术优化页面可以有四个好处：

1． 减少页面的加载时间

2． 使页面分步输出，改善用户体验

3． 使页面结构化，提高可读性，更加便于维护

4． 每个pagelet 都是相互独立的，如果有一个pagelet 的内容不能加载，并不会影响其他的pagelet 的内容显示。

　　

 

【优化】bigpipe技术的更多相关文章

  1. [转载]BigPipe技术

    1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒:同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据表 ...

  2. unity3d的优化场景技术LOD+IOC

    一.unity3d的优化场景技术  LOD+IOC 遮挡剔除(occlusion culling)其实就是在摄像机范围内的物体才被渲染出来,没有在视野范围内的,统统关掉渲染,这样能让性能大大提高. I ...

  3. 大型网站优化-memcache技术

    大型网站优化-memcache技术 memory+cache 内存缓存 memcache简介 memcache是一套分布式的高速缓存系统,由LiveJournal的Brad Fitzpatrick开发 ...

  4. 大话SEO网站优化|SEO优化入门技术详解

    网络营销 网络营销是借助一切被目标用户认可的网络应用服务平台开展的引导用户关注的行为或活动,目的是促进产品在线销售及扩大品牌影响力. web1.0时代有搜索引擎营销.BBS营销.邮件营销.病毒式营销. ...

  5. Unity性能优化——LOD技术

    LOD,中文名多层次细节,是游戏中最常用的技术,它按照模型的位置和重要程度决定物体渲染的资源分配,降低非重要物体的面数和细节度,从而获得高效率的渲染运算.今天我们来实现使用它来做一个简单的优化例子. ...

  6. MySQL优化（一） 优化关键技术

    MySql的优化是一个综合性的技术,主要包括有: (1)表的设计合理化(符合 3NF 三范式) (2)添加适当的索引(Index):索引分类:普通索引.主键索引.唯一索引.全文索引(文本).空间索引. ...

  7. Nginx与Tomcat/PHP架构优化的技术分享

    PHP性能优化 一般我们是在/usr/local/php5/etc/php-fpm.conf这个文件里面进行相应的配置. 1)       如果设置成static,php-fpm进程数自始至终都是pm ...

  8. 网站前端优化技术 BigPipe分块处理技术

    前端优化已经到极致了么?业务还在为看到不停的而揪心么?还在为2秒率不达标苦恼么? 好吧我知道答案,大家一如既往的烦恼中... 那么接下来我们看看,facebook,淘宝,人人网,一淘都是怎么做前端优化 ...

  9. facebook分块加载，页面优化，BigPipe，简单实例

    <!DOCTYPE html><html><head><meta charset=”utf-8″><title>BigPipe Demo 3 ...

随机推荐

  1. 有关在 Word 中撰写博客的帮助

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  2. 201709021工作日记--Volley源码解读（四）

    接着volley源码(三)继续,本来是准备写在(三)后面的,但是博客园太垃圾了,写了半天居然没保存上,要不是公司这个博客还没被限制登陆,鬼才用这个...真是垃圾 继续解读RequestQueue的源码 ...

  3. c# 点击按选择图片然后展示在richTextBox中

    OpenFileDialog o = new OpenFileDialog(); o.InitialDirectory = AppDomain.CurrentDomain.BaseDirectory; ...

  4. stdafx.h、stdafx.cpp是干什么用的？为什么我的每一个cpp文件都必须包含stdafx.h？ Windows和MFC的include文件都非常大，即使有一个快速的处理程序，编

    sstdafx.h.stdafx.cpp是干什么用的?为什么我的每一个cpp文件都必须包含stdafx.h? Windows和MFC的include文件都非常大,即使有一个快速的处理程序,编译程序也要 ...

  5. Lucene.net 基本示例 《第一篇》

    Lucene.net是java平台搜索插件Lucene的移植版.它的主要用于开发搜索引擎,站内搜索等. 开篇之前,写个最简单的DEMO,让自己先体验下Lucene.net的魅力,顺便搭建环境. sta ...

  6. nginx backend 健康检查

    ngx_http_proxy_module 模块和ngx_http_upstream_module模块(自带) 严格来说,nginx自带是没有针对负载均衡后端节点的健康检查的,但是可以通过默认自带的n ...

  7. IIS配置404页面配置，IIS自定义404页面

    .NET 环境下 用到404页的场景一般有两种: 场景一:报黄页,程序性的错误,代码层可以捕捉到的. 场景二:用户输入不存在的页面,代码层捕捉不到的. IIS 默认会有404的配置,不过这种呈现出的都 ...

  8. JWT+Log4net配置与使用

    Log4net的优点        log4net是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介.程序运行过 ...

  9. C#: 获取当前路径不要用Environment.CurrentDirectory

    网上大把文章写到C#获取当前路径的方法如下: // 获取程序的基目录. System.AppDomain.CurrentDomain.BaseDirectory // 获取模块的完整路径. Syste ...

  10. 程序媛计划——python初级class5～13

    列表和元组都是可迭代对象(可以用于for in) 列表 [] #添加列表元素: list.append(argu) #修改列表: list[2] = 2017 #删除列表元素 Del list[2] ...