下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

高性能流水线页面技术之介绍——Big Pipe

作者:课课家教育     来源: http://www.kokojia.com点击数:2420发布时间: 2016-08-09 14:00:36

标签: 流水线技术big pipephp

  流水线(pipe line)技术,是指在程序执行时多条指令重叠进行操作的一种准并行处理实现技术。流水线是Intel首次在486芯片中开始使用的,它的工作方式就像工业生产上的装配流水线。在CPU中由5~6个不同功能的电路单元组成一条指令处理流水线,然后将一条X86指令分成5~6步,再由这些电路单元分别执行,这样就能实现在一个CPU时钟周期完成一条指令,从而提高CPU的运算速度。CPU的工作大致分为指令的获取、解码、运算和写入结果四个步骤。采用流水线设计之后,指令就可以连续不断地进行处理。在同一个较长的时间段内,显然拥有流水线设计的CPU能够处理更多的指令。

高性能流水线页面技术之介绍——Big Pipe_流水线技术_big pipe_课课家

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

  一、Big Pipe的设计动机

  我们需要了解一下现有的动态Web服务系统,以便更好地了解Big Pipe。动态Web服务系统的历史可以追溯到万维网的初期,但现在与初期相比并没有改变多少。现代网站比10年前拥有更好的动态效果和互动性,传统的网页服务系统早已无法跟上当今互联网速度的要求。

  如下图,传统方式中的用户请求的过程,可以让我们更好地理解Big Pipe:

流水线技术

  但在现代网站中,传统模式的效率是非常低的。因为很多系统的操作顺序,不能互相重叠。一些如延时加载Java Script、并行下载等优化技术已被网络社区广泛采用,以此来克服的一些限制。

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

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

  二、Big Pipe的工作原理

  Big Pipe首先将网页分解成多个pagelet,每个Pagelet生成过程都经过以下几个阶段:

  (1)请求解析:Server解析和完整性检查的HTTP request;

  (2)数据获取:Server从存储层获取数据;

  (3)标记生成:Server生成响应的HTML标记;

  (4)网络传输:网络响应从Web服务器传送到浏览器;

  (5)CSS的下载:响应浏览器下载网页CSS的请求;

  (6)DOM树和应用CSS样式: 浏览器构造的DOM文档树,然后应用它的CSS规则;

  (7)Java Script下载: 浏览器下载网页中JavaScript引用的资源;

  (8)Java Script执行: 浏览器的网页执行JavaScript代码。

  Big Pipe和传统模式的页面请求过程差不多,但Big Pipe能让多个Pagelet在同一时刻处于不同的阶段。

pipe line

  以上的这个Facebook主页包括多个pagelet,它们相互独立。从用户的角度来看,页面是一块一块逐步呈现的,感觉网页内容呈现得非常快,大大减少了用户对页面延时的感知。

  例如:当“导航pagelet”处于页面显示阶段时,“新闻动态pagelet”可能正处于服务器生成阶段。

  在Big Pipe中,一个用户请求的生命周期是这样的:在浏览器发送一个HTTP请求到Web服务器。收到HTTP请求,并在上面进行全面的检查,服务器收到请求后,进行一些必要的检查,然后立即返回一个不完整的HTML文件:

  其中有<head>和<body>:

  <head>中包括Big Pipe的Javascript库,以解析Page let。

  <body>中是一个模板,描述了页面的逻辑结构,每个逻辑部分使用page let占位符进行占位,例如:

  <div>
  <div class="left">
  <div id="pagelet_nav"></div>
  </div>
  <div class="main">
  <div id="pagelet_composer"></div>
  <div id="pagelet_ads"></div>
  </div>

  Web服务器一个接一个的生成pagelet,只要一个page let生成了,立即被发送到客户端,客户端收到一个pagelet后,开始解析并加载CSS,然后渲染显示出来。同时,服务器在并行处理下一个pagelet。

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

big pipe

  因此,Big Pipe的结果是:同时有多个pagelet执行,但处于不同阶段,使浏览器和服务器并行高效处理。

  pagelet的内容是一个JSON对象,包括HTML内容,和需要引用的CSS、JavaScript。

  首先,Big Pipe下载pagelet的CSS,然后在这个pagelet占位符所在位置进行显示,多个pagelet的CSS可同时下载,可以无序,JavaScript的优先级最低,所有pagelet都显示出来后才开始下载JavaScript。

  三、性能测试结果

  下图呈现了传统模式与Big Pipe的性能比较,对Facebook主页的延迟时间进行了对比,收集数据方式是在禁用浏览器缓存的情况下加载页面50次,该图显示Big Pipe用户在大多数浏览器中感受到的延迟减少了一半。

性能测试

  Big Pipe是从微处理器的流水线中得到启发的,它与现代微处理器的流水线执行过程相似:多重指令管线通过不同的处理器执行单元,以达到性能的最佳。虽然Big Pipe是对现有的服务网络基础过程的重新设计,但它不需要改变现有的网络浏览器或server,它完全使用PHP和JavaScript来实现。

  另外,大多数阶段Big Pipe只能操作一次Pagelet,但有时候,多个Pagelets的CSS和JavaScript下载可以同时运作,这类似于超标量微处理器:cpu内一般能有多条流水线,这些流水线能够并行处理。

  Big Pipe还有一个重要的区别,我们实现了从并行编程引入的“障碍”概念,所有的Pagelets要完成一个特定阶段,如多个Pagelet显示区,它们都可以进一步JavaScript下载和执行。

  BigPipe提出分块的概念,即根据页面内容位置的不同,将整个页面分成不同的块儿,即pagelet。将众多pagelet加载的不同阶段像流水线一样在浏览器和服务器上执行,使浏览器和服务器并行化,从而达到重叠服务器端运行时间和浏览器端运行时间的目的。使用BigPipe不仅可以节省时间,缩短加载时间,而且可以同过pagelet的分步输出,使一部分的页面内容更快的输出,从而获得更好的用户体验。

赞(19)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程