《
使网站更快的创新技术 BigPipe》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233OR013.htm
性能测试结果
要应用该Web服务器和浏览器之间的并行性，BigPipe首先分解网页成多个可调用的Pagelets。正如流水线微处置器划分一个指令的性命周期为（如“取指令”，“指令解码”，“执行”，“写回存放器”等）多个阶段,使用不带单位的line-height，BigPipe的页面生成进程分为以下几个阶段：
作者蒋长浩目前是Facebook的研究迷信家,使用margin居中常见问题，他致力于研讨使网站更快的各种翻新。
这种高度并行系统的最终成果是，多个Pageletsr的不同执行阶段同时进行,使用Div+Css进行网页布局的11个好处。例如，浏览器可以正在下载三个Pagelets CSS的资源，同时已经显示另一Pagelet内容，与此同时，服务器也在生成新的Pagelet。从用户的角度来看,使用CSS选择器实现超链接带带图标样式，页面是逐渐出现的。最开始的网页内容会更快的显示，这大大减少了用户的对页面延时的感知。如果您要本人亲眼看到区别，你可以尝试以下连结： 传统模式和BigPipe。第一个链接是传统模式单一模式显示页面。第二个链接是BigPipe管道模式的页面。假如你的浏览器版本比较老，网速也很慢，浏览器缓存不佳，哪么两页之间的加截时间差异将更加显明。
渲染后的第一个反映到客户端，Web服务器持续一个接一个生成Pagelets只有一个Pagelet生成，他将立刻刷新到客户端在一个JSON编码的对象，包括所有的CSS，JavaScript的pagelet，它的HTML内容，以及一些元数据所需的资源。例如:
值得一提的是BigPipe是从微处理器的流水线中得到启示,使用CSS自动隐藏网页文字的技巧。然而，他们的流水线过程之间存在一些差别。例如，虽然大多数阶段BigPipe只能操作一次Pagelet，但有时多个Pagelets的CSS和JavaScript下载却可以同时运作，这类似于超标量微处理器。BigPipe另一个主要差别是，我们实现了从并行编程引入的“阻碍”概念，所有的Pagelets要完成一个特定阶段，如多个Pagelet显示区，它们都可以进前进一步JavaScript下载和执行。
前三个阶段执行，由Web服务器，最后四个阶段是由浏览器执行。每个Pagelet必需经由所有这些阶段顺序，但BigPipe在不同的阶段使多少个Pagelets同时执行。
在BigPipe，一个用户请求的生命周期是这样的：在浏览器发送一个HTTP请求到Web服务器。在收到的HTTP请求，并在上面进行一些全面的检讨，网站服务器即时发还一个未封闭的HTML文件，其中包括一个HTML 标签和标签的开端标签。标签包括BigPipe的JavaScript库来解析Pagelet当前收到的回答。在标签，有一个模板，它指定了页面的逻辑构造和Pagelets占位符。例如:
BigPipe是一个从新设计的基本动态网页服务系统。大体思路是，分解网页成叫做Pagelets的小块，而后通过Web服务器和浏览器树立管道并治理他们在不同阶段的运行。这是相似于大多数现代微处理器的流水线执行过程：多重指令管线通过不同的处理器执行单元，以到达性能的最佳。固然BigPipe是对现有的服务网络基础过程的重新设计，但它却不须要转变现有的网络浏览器或服务器，它完整使用PHP和JavaScript来实现。
在客户端在收到Pagelet通过“onPageletArrive”发出的指令，BigPipe的JavaScript库将首先下载它的CSS资源；在CSS资源被下载完成后，BigPipe将在Pagelet的标记HTML显示它的innerHTML。多个Pagelets的CSS可在统一时间下载，它们可以根据其各自CSS的下载完成情形来确认显示顺序。在BigPipe中，JavaScript资源的优先级低于CSS和页面内容。因而，BigPipe不会在所有Pagelets显示出来之前下载任何Pagelet中的JavaScript。然后，所有Pagelets的JavaScript异步下载。最后Pagelet的JavaScript初始化代码依据其各自的下载完成情况来断定执行顺序。
Web服务器的发生时间和浏览器的渲染时间重叠，是特殊有用的，如Facebook这样内容丰盛的网站。一个典范的Facebook的网页包括很多起源不同的数据材料：挚友名单，挚友动态，广告等。在传统的网页浮现模式的用户将不得不等到这些查询数据都返回并生成最终文件，然后将其发送到用户的电脑。任何一个查问延迟都将拖慢全部最终文件的生成。
BigPipe如何工作
在Facebook，我们激励发明性思考。我们一直的尝试创新技术，以使我们的网站更快。
下图是传统模式和BigPipe性能数据比拟图，数据是75%用户对一个页面中最重要的内容（例如：新闻动态被以为是在Facebook主页上最重要的内容）的感知延迟时间。收集数据方法是加载Facebook主页50次并且禁用浏览器缓存。该图显示BigPipe使用户在大多数浏览器中感触到的延迟减少了一半。
为了更好的了解BigPipe，我们需要懂得一下现有的动态Web服务系统，它的历史可以追溯到万维网的初期，但当初与初期比拟却并不多少改变。现代网站有着远远高于10年前的动态后果和互动性，但传统的网页服务系统早已无奈跟受骗今互联网速度的请求。在传统的模式，用户请求的生命周期如下：
Facebook的网站速度做为最症结的公司义务之一。在2009年，我们胜利地实现了Facebook网站速度晋升两倍 ,使用CSS定位页面的“footer”。而恰是我们的工程师团队的几个要害的立异使它成为可能。在本文中，我将向大家先容我们的机密兵器之一，我们称之为BigPipe的巨大底层技术。
浏览器发送一个HTTP请求到Web服务器。 Web服务器解析要求，然后读取数据存储层，制订一个HTML文件,
使用CSS定位的网页footer，并用一个HTTP响应把它发送到客户端。 HTTP响应通过互联网传递到浏览器。 浏览器解析Web服务器的响应，使用HTML文件构建了一个的DOM树，并且下载援用的CSS和JavaScript文件。 CSS资源下载后，浏览器解析它们，并将它们利用到DOM树。 JavaScript资源下载后，浏览器解析并执行它们。
Tag：BigPipe BigPipe
请求解析：Web服务器解析和完全性检查的HTTP请求。 数据获取：Web服务器从存储层获取数据。 标记生成：Web服务器生成的响应的HTML标志。 网络传输：响应从Web服务器传送到浏览器。 CSS的下载：浏览器下载网页的CSS的要求。 DOM树结构和CSS款式：浏览器结构的DOM文档树，然后运用它的CSS规矩,
使用CSS如何实现自动换行和强制不换行。 JavaScript中下载：浏览器下载网页中JavaScript引用的资源。 JavaScript执行：浏览器的网页执行JavaScript代码。
上面的图片应用Facebook主页为例子来阐明如何将网页是分解成Pagelets。该主页包含几个Pagelets：“作者Pagelet”，“导航Pagelet”，“新闻动态Pagelet”，“恳求框Pagelet”，“广告pagelet”，“友人推举”和“接洽”等他们是彼此独破的。当“导航Pagelet”显示给用户，“消息动态Pagelet”依然可以在服务器上正在生成。
（Facebook主页的Pagelets，每个矩形对应一个Pagelet。）
(Facebook主页的延迟时间对照)
传统模式在古代网站中效力是十分低下的，由于良多体系的操作次序，不能相互重叠。一些如延时加载JavaScript、并行下载等优化技巧已被网络社区普遍采取,使用CSS制作网页的15条常识，以此来战胜的一些限度。然而，这些优化却很少波及Web服务器跟浏览器的履行顺序造成的瓶颈。当Web服务器正忙天生一个页面，浏览器处于闲置状况,使用CSS创建有图标的网站导航菜单，挥霍其周期起早贪黑。当Web服务器实现生成页面，并将其发送到浏览器，阅读器则成为机能瓶颈并且Web服务器对其无从辅助。重叠Web服务器的生成时间与浏览器的渲染时间，咱们不仅能够减少终极的时光延迟，也能使网页更早显示用户可见区域给用户，从而大大减少用户对延迟的感知。
念头
--> [
网站建设之]使网站更快的创新技术:BigPipe
(责任编辑：网站建设)
使网站更快的创新技术 BigPipe相关文章