BigPipe_高性能流水线页面手艺

访客4年前黑客资讯1123

Facebook的网站速率做为最要害的公司义务之一。在2009年,我们成功地实现了Facebook网站速率提升两倍 。而正是我们的工程师团队的几个要害的创新使它成为可能。在本文中,我将向人人先容我们的秘密武器之一,我们称之为BigPipe的伟大底层手艺。

BigPipe是一个重新设计的基础动态网页服务体系。大要思绪是,剖析网页成叫做Pagelets的小块,然后通过Web服务器和浏览器确立管道并治理他们在差别阶段的运行。这是类似于大多数现代微处置器的流水线执行历程:多重指令管线通过差别的处置器执行单米,以到达性能的更佳。虽然BigPipe是对现有的服务 *** 基础历程的重新设计,但它却不需要改变现有的 *** 浏览器或服务器,它完全使用PHP和JavaScript来实现。


念头

为了更好的领会BigPipe,我们需要领会一下现有的动态Web服务系统,它的历史可以追溯到万维网的初期,但现在与初期相比却并没有若干改变。现代网站有着远远高于10年前的动态效果和互动性,但传统的网页服务系统早已无法跟上当今互联网速率的要求。

为了明白BigPipe,我们先看一下传统方式下用户请求的历程:


传统模式在现代网站中效率是异常低下的,由于许多系统的操作顺序,不能相互重叠。一些如延时加载JavaScript、并行下载等优化手艺已被 *** 社区普遍接纳,以此来战胜的一些限制。

然而,这些优化却很少涉及Web服务器和浏览器的执行顺序造成的瓶颈。当Web 服务器正忙天生一个页面,浏览器处于闲置状态,虚耗其周期无所事事。当Web 服务器完成天生页面,并将其发送到浏览器,浏览器则成为性能瓶颈而且Web 服务器对其无从辅助。重叠服务器的天生时间与浏览器的渲染时间,我们不仅可以削减最终的时间延迟,也能使网页更早显示用户可见区域给用户,从而大大削减用户对延迟的感知。

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


BigPipe若何事情

BigPipe首先剖析网页成多个pagelet,每个Pagelet都经由以下几个阶段:

(1)Server请求剖析和检查request
(2)Server从存储层获取数据
(3)Server天生HTML响应内容
(4) *** 响应从Web服务器传送到浏览器侧
(5)响应CSS的下载请求
(6)构建DOM树和应用CSS样式
(7)JavaScript下载
(8)JavaScript执行

感受和传统模式下的页面请求历程一样啊,但BigPipe能让多个Pagelet在统一时刻处于差别的阶段


(Facebook主页的pagelets,每个矩形对应一个Pagelet。)

该Facebook主页包罗多个pagelet,相互自力,从用户的角度来看,页面是一块一块逐步出现的,感受网页内容出现得异常快,大大削减了用户对页面延时的感知。例如当“导航pagelet”处于页面显示阶段时,“新闻动态pagelet”可能正处于Server天生阶段。在BigPipe中,一个用户请求的生命周期是这样的:在浏览器发送一个HTTP请求到Web服务器。在收到的HTTP请求,并在上面举行一些周全的检查,服务器收到请求后,举行一些需要的检查,然后立刻返回一个不完整的HTML文件:其中有<head>和<body>

<head>中包罗BigPipe的JavaScript库,用来剖析Pagelet

<body>中是一个模板,形貌了页面的逻辑结构,每个逻辑部门使用pagelet占位符举行占位,例如:

<div>
<div>
<div id="pagelet_nav"></div>
</div>
<div>
<div id="pagelet_composer"></div>
<div id="pagelet_ads"></div>
</div>

Web服务器一个接一个的天生pagelet,只要一个pagelet天生了,立刻被发送到客户端,客户端收到一个pagelet后就更先剖析并加载CSS,然后渲染显示出来,于此同时,服务器在并行处置下一个pagelet

例如,浏览器可以在下载3个pagelet的CSS的同时,渲染另一个pagelet内容,与此同时,服务器在天生另一个pagelet的内容。


以是BigPipe的效果就是:多个pagelet同时执行,但处于差别阶段,使浏览器和服务器并行高效处置

pagelet的内容是一个 *** ON工具,包罗HTML内容,和需要引用的CSS、JavaScript

BigPipe首先下载pagelet的CSS,然后在这个pagelet占位符所在的位置举行显示,多个pagelet的CSS可同时下载,可以无序,JavaScript的优先级更低,所有pagelet都显示出来之后才更先下载JavaScript


性能测试效果

下图是传统模式与BigPipe的性能对照图,对Facebook主页的延迟时间举行了对比, *** 数据方式是在禁用浏览器缓存的情况下加载页面50次,该图显示BigPipe使用户在大多数浏览器中感受到的延迟削减了一半。


值得一提的是BigPipe是从微处置器的流水线中获得启发。然而,他们的流水线历程之间存在一些差异。例如,虽然大多数阶段BigPipe只能操作一次Pagelet,但有时多个Pagelets的CSS和JavaScript下载却可以同时运作,这类似于超标量微处置器。

BigPipe另一个主要区别是,我们实现了从并行编程引入的“障碍”观点,所有的Pagelets要完成一个特定阶段,如多个Pagelet显示区,它们都可以举行进一步JavaScript下载和执行。

在Facebook,我们激励创造性思索。我们不停的实验创新手艺,以使我们的网站更快。

内容整理自Facebook文章:https://www.facebook.com/note.php?note_id=389414033919


思源资源网:分类流动

1.阿里云: 本站现在使用的是阿里云主机,平安/可靠/稳固。点击领取2000米代金券、领会最新阿里云产物的种种优惠流动点击进入

相关文章

电影《明天的餐桌》定档 菅野美穗时隔10年再度

菅野美穗 菅野美穗、高畑充希、尾野真千子三大实力女星共同主演的新片《明天的餐桌》首曝预告,同时发布人物海报。影片由《昭和64年》《跨越8年的新娘》导演濑濑敬久执导,将...

黑客帝国主要内容七百字(黑客帝国写的什么)

黑客帝国主要内容七百字(黑客帝国写的什么)

本文导读目录: 1、《黑客帝国》主要讲了什么内容。简单写? 2、《黑客帝国》主要讲的什么故事? 3、黑客帝国1,2,3讲的是什么? 4、谁有黑客帝国1~3部的内容简介? 5、黑客帝国到...

BQ甜筒冰淇淋加盟费多少?事实让你吃惊

BQ甜筒冰淇淋加盟费多少?事实让你吃惊

市面上的加盟项目有许多,要说什么项目最火热,必然会有人提到BQ甜筒冰淇淋加盟这个项目。BQ甜筒冰淇淋加盟不消小编为各人先容许多,浩瀚的加盟商已经乐成的策划了一家有一家的连锁店肆,而且生意都很红火,得到...

艾玛沃特森被黑客入侵(艾玛沃特森信息)

艾玛沃特森被黑客入侵(艾玛沃特森信息)

本文导读目录: 1、求艾玛沃特森被捆绑的电影或电视剧及具体级数 2、这是什么电影 3、艾玛沃特森的个人资料 4、艾玛沃特森都出演过哪些精彩的电影? 5、艾玛沃森 6、求回溯迷踪电影...