【Javascript】BigPipe

传统请求周期：

浏览器发送一个HTTP请求到Web服务器；

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

2. HTTP响应通过互联网传送到浏览器；

3. 浏览器解析Web服务器的响应；

4. 使用HTML文件构建一个DOM树并下载引用的CSS和javascript文件

5. CSS下载后，浏览器解析它，并将它们应用到DOM树；

6. javascript下载后，浏览器解析并执行它；

针对这样一个低下的执行效率，我们该如何下手？延迟加载js?并行下载？但是这些很少涉及到处理web服务器和浏览器的执行顺序带来的瓶颈。当web服务器正在生成一个页面的时候，浏览器却没事干。当web服务器生成完成一个页面并发送给浏览器渲染的时候，web服务器却帮不上忙。
那么，我们是否可以重叠web服务器的生成时间与浏览器的渲染时间呢？这样是不是能更快的是页面呈现给用户？增加用户体验？

OK，下面我们来说说这一点。

首先举个栗子：

传统模式下，如果用户在一个淘宝搜索他想买的东西，淘宝会将与这个东西相关的产品、广告等数据呈现出来，这个时候，用户不得不等到这些数据都返回并生成最终文件返回到用户终端，那这样必将耗费很长的时间。

这是个很明显的web服务器与浏览器没有并行工作的案例。

为了实现这一点，我们来看看BigPipe在页面生成过程中是如何工作：

1. 请求解析：web服务器解析和完整性检查的http请求；

2. 数据获取：web服务器从存储层获取数据;

3. 标记生成：web服务器生成响应的html标记;

4. 网络传输：响应从web服务器传送到浏览器;

5. CSS下载；

6. 浏览器构造DOM树结构并应用CSS样式；

7. js下载；

8. 浏览器执行js；

需要注意的是：BigPipe把一个页面分成了多个可调用的Pagelets（相当于一个页面的一块div，例如导航div、请求div等，这些pagelets之间是相互独立的），并且在不同阶段对这些多个的Pagelets是同时执行

例如：

    <div>
        <div id="left_column">
            <div id="pagelet_navigation">
            div>
        div>

        <div id="middel_column">
            <div id="pagelet_composer">
            div>
            <div id="pagelet_stream">
            div>
        div>

        <div id="right_column">
            <div id="pagelet_ask">
            div>
        div>
    div>

`

浏览器在渲染后会输出，但是web服务器并没有停下，它会继续生成后续的pagelet，然后浏览器接着渲染；也就是说这一过程形成了一个循环的结构，直到这个循环执行完毕。

并且，在BigPipe中，多个Pagelets的CSS可在同一时间下载，他们可以根据各自CSS的下载完成情况来确认显示顺序。而js的下载要等到所有的pagelets都下载之后才下载。

从这个角度看，页面是逐步呈现的。

来看一段facebook使用BigPipe的代码：

    <script>

    big_pipe.onPageletArrive({

    "id":"pagelet_welcome_box",
    "css":{
        name: "css/c5mv8gd5gwoc4kk0.pkg.css"
        permanent: true
        src: "http://static.ak.fbcdn.net/rsrc.php/zBP3B/hash/abee68r4.css"
        type: "css"
    },
    "js":{
        name: "js/19khsprwvtvokwow.pkg.js"
        permanent: false
        src: "http://static.ak.fbcdn.net/rsrc.php/zAVXU/hash/e8mwcqsi.js"
        type: "js"
    },
    "content":{
        "pagelet_welcome_box":"
 ...这里省略N多HTML"
        }
    });
    script>

重点看四个参数id、css、js、content,很明显，content中的html是插入到对应的id的，并下载对应的css、js。