BigPipe 了解

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程:多重指令管线通过不同的处理器执行单元,以达到性能的最佳。虽然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代码。[1]

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

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

在客户端在收到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管道模式的页面。如果您的浏览器版本比较老,网速也很慢,浏览器缓存不佳,哪么两页之间的加截时间差别将更加明显。

在传统的模式,用户请求的生命周期如下:

1. 浏览器发送一个HTTP请求到Web服务器。

2. Web服务器解析请求,然后读取数据存储层,制定一个HTML文件,并用一个HTTP响应把它发送到客户端。

3. HTTP响应通过互联网传送到浏览器。

4. 浏览器解析Web服务器的响应,使用HTML文件构建了一个的DOM树,并且下载引用的CSS和JavaScript文件。

5. CSS资源下载后,浏览器解析它们,并将它们应用到DOM树。

6. JavaScript资源下载后,浏览器解析并执行它们。

传统模式在现代网站中效率是非常低下的,因为很多系统的操作顺序,不能互相重叠。一些如延时加载JavaScript、并行下载等优化技术已被网络社区广泛采用,以此来克服的一些限制。然而,这些优化却很少涉及Web服务器和浏览器的执行顺序造成的瓶颈。当Web服务器正忙生成一个页面,浏览器处于闲置状态,浪费其周期无所事事。当Web服务器完成生成页面,并将其发送到浏览器,浏览器则成为性能瓶颈并且Web服务器对其无从帮助。重叠Web服务器的生成时间与浏览器的渲染时间,我们不仅可以减少最终的时间延迟,也能使网页更早显示用户可见区域给用户,从而大大减少用户对延迟的感知。

Web服务器的产生时间和浏览器的渲染时间重叠,是特别有用的,如Facebook这样内容丰富的网站。一个典型的Facebook的网页包含许多来源不同的数据资料:好友名单,好友动态,广告等。在传统的网页呈现模式的用户将不得不等到这些查询数据都返回并生成最终文件,然后将其发送到用户的电脑。任何一个查询延迟都将拖慢整个最终文件的生成。

时间: 2024-10-14 03:47:33

BigPipe 了解的相关文章

BigPipe设计原理

高性能页面加载技术--BigPipe设计原理及Java简单实现 1.技术背景 动态web网站的历史可以追溯到万维网初期,相比于静态网站,动态网站提供了强大的可交互功能.经过几十年的发展,动态网站在互动性和页面显示效果上有了很大的提升,但是对于网站动态网站的整体页面加载架构没有做太大的改变.对于用户而言,页面的加载速度极大的影响着用户体验感.与静态网站不同,除了页面的传输加载时间外,动态网站还需考虑服务端数据的处理时间.像facebook这样大型的用户社交网站,必须考虑用户访问速度问题, 传统we

asp.net mvc实现bigpipe的另一种方式

bigpipe是facebook提出的一种加快页面生成与呈现的方案. 之前我也在网上看到过asp.net mvc的实现方案,但一般都是在View中使用方法注册回调的方式来实现的,并且被注册的模块一般为一个Action或String.这种方式将原本一体的页面拆分为多个,增加了代码复杂度,并且不直观.为解决上述问题,我现在以重写section的方式实现了另一套解决方案,效果如下: 在使用__async的section包围两个耗时的模块后,整体页面由原来的4s+缩短为3s+,并且部分css与js被提前

【优化】bigpipe技术

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

Bigpipe学习笔记和java版实现

写在开头 --这篇bigpipe的笔记早在一年前就想写了,但是一直被耽搁了.终于今天再翻看旧ppt时才想起要补上这篇博客. 本文中关于bigpipe的介绍是根据网络上的资料整理出来的(图片均来源于网络),而实现部分是博主的亲身实践. 1.什么是bigpipe 搞互联网的同学也许都知道一个数字--4秒,有研究表明,如果一个网站没有在4秒之内加载完成,用户就会感到焦躁不愉快,并离开这个网站(数据来自性能测试网站http://gtmetrix.com/). 2010 年初的时候,Facebook 的前

BigPipe

In the traditional model, the life cycle of a user request is the following: Browser sends an HTTP request to web server. Web server parses the request, pulls data from storage tier then formulates an HTML document and sends it to the client in an HT

BigPipe学习研究

1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒:同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据表明,如果用户打开一个网站,等待3~4 秒还没有任何反应,他们会变得急躁,焦虑,抱怨,甚至关闭网页并且不再访问,这是非常糟糕的情况.所以,网页加载的速度十分重要,尤其对于拥有遍布全球的5亿用户的Facebook(全球最大的社交服务网站)这样的大型网站,有着大量并发请求.海量数据等客观情况,速度就成了必

基于Nodejs的BigPipe实现

简介 BigPipe是facebook推出的用于优化网页加载速度的技术,它突破了传统网页的加载方式,通过把网页内容进行分块,然后对这些块进行并行传输从,使得浏览器的渲染无需等到整个页面加载完毕,大大提升网页加载速度.天猫上首页就有这种实现. Bigpie适用于网页分块清晰,且规模达到一定程度.简单说就是使用bigpipe要达到优化的效果才有意义. 实现原理 利用http1.1中的transfer-encoding:chunked头消息来进行分块传输,初始时只传输网页的骨架,待到具体分块到达后,利

BigPipe为什么可以节省时间?

关于什么是BigPipe,请移步http://baike.baidu.com/view/4601904.htm去查阅一下.在实现BigPipe的过程中,就对BigPipe到底能省多少时间比较奇怪.普通的web页面,一般来说是页面生成,网络传输,前面页面渲染,这三部分的时间加起来就是操作人员从点击鼠标到最后看到页面的时间.比如,一个页面有主页面框架,有4个部分的内容显示,为了便于分析,简化一下模型,假设主页面框架生成需要0.2S,4个部分的内容内容生成各自需要0.2S,网络传输与浏览器渲染也各计成

Bigpipe学习【转】

转自:http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html 1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒:同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据表明,如果用户打开一个网站,等待3~4 秒还没有任何反应,他们会变得急躁,焦虑,抱怨,甚至关闭网页并且不再访问,这是非常糟糕的情况.所以,网页加载的速度十分重要,尤其对