传统请求周期:
浏览器发送一个HTTP请求到Web服务器;
针对这样一个低下的执行效率,我们该如何下手?延迟加载js?并行下载?但是这些很少涉及到处理web服务器和浏览器的执行顺序带来的瓶颈。当web服务器正在生成一个页面的时候,浏览器却没事干。当web服务器生成完成一个页面并发送给浏览器渲染的时候,web服务器却帮不上忙。 那么,我们是否可以重叠web服务器的生成时间与浏览器的渲染时间呢?这样是不是能更快的是页面呈现给用户?增加用户体验?
OK,下面我们来说说这一点。
首先举个栗子:
传统模式下,如果用户在一个淘宝搜索他想买的东西,淘宝会将与这个东西相关的产品、广告等数据呈现出来,这个时候,用户不得不等到这些数据都返回并生成最终文件返回到用户终端,那这样必将耗费很长的时间。
这是个很明显的web服务器与浏览器没有并行工作的案例。
为了实现这一点,我们来看看BigPipe在页面生成过程中是如何工作:
需要注意的是: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":"<div id=\"c4c13a3ed2dd1e0e349b72\"><div class=\"UIImageBlock clearfix fbxWelcomeBox\"> ...这里省略N多HTML"
}
});
</script>
重点看四个参数id、css、js、content,很明显,content中的html是插入到对应的id的,并下载对应的css、js。