传统请求周期：
浏览器发送一个HTTP请求到Web服务器；
- web服务器解析请求，然后读取数据存储层，制定一个HTML文件并用一个HTTP响应把它发送到客户端；
- HTTP响应通过互联网传送到浏览器；
- 浏览器解析Web服务器的响应；
- 使用HTML文件构建一个DOM树并下载引用的CSS和javascript文件
- CSS下载后，浏览器解析它，并将它们应用到DOM树；
- javascript下载后，浏览器解析并执行它；
针对这样一个低下的执行效率，我们该如何下手？延迟加载js?并行下载？但是这些很少涉及到处理web服务器和浏览器的执行顺序带来的瓶颈。当web服务器正在生成一个页面的时候，浏览器却没事干。当web服务器生成完成一个页面并发送给浏览器渲染的时候，web服务器却帮不上忙。 那么，我们是否可以重叠web服务器的生成时间与浏览器的渲染时间呢？这样是不是能更快的是页面呈现给用户？增加用户体验？
OK，下面我们来说说这一点。
首先举个栗子：
传统模式下，如果用户在一个淘宝搜索他想买的东西，淘宝会将与这个东西相关的产品、广告等数据呈现出来，这个时候，用户不得不等到这些数据都返回并生成最终文件返回到用户终端，那这样必将耗费很长的时间。
这是个很明显的web服务器与浏览器没有并行工作的案例。
为了实现这一点，我们来看看BigPipe在页面生成过程中是如何工作：
- 请求解析：web服务器解析和完整性检查的http请求；
- 数据获取：web服务器从存储层获取数据;
- 标记生成：web服务器生成响应的html标记;
- 网络传输：响应从web服务器传送到浏览器;
- CSS下载；
- 浏览器构造DOM树结构并应用CSS样式；
- js下载；
- 浏览器执行js；
需要注意的是：BigPipe把一个页面分成了多个可调用的Pagelets（相当于一个页面的一块div，例如导航div、请求div等，这些pagelets之间是相互独立的），并且在不同阶段对这些多个的Pagelets是同时执行
例如：
代码语言：javascript复制 <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的代码：
代码语言：javascript复制 <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":"<div id="c4c13a3ed2dd1e0e349b72"><div class="UIImageBlock clearfix fbxWelcomeBox"> ...这里省略N多HTML"
}
});
</script>重点看四个参数id、css、js、content,很明显，content中的html是插入到对应的id的，并下载对应的css、js。
