nodejs+bigpipe+angularjs技术实现

bigpipe技术:
淘宝一篇介绍bigpipe的文章:
http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html

另外一篇nodejs使用bigpipe的文章:
http://engineering.xueqiu.com/blog/2013/02/27/implementing-bigpipe-in-nodejs/

我就是看上面两篇来了解bigpipe的,在尝试用node实现后,感觉这个很强大,非常强大,目前我用的比较多的是页面加载完用ajax请求,然后用前端mvc绑定数据。

假如说页面内容很多,加载完dom后,需要7,8个接口来通过ajax来get请求,页面是需要发送8,9个请求的。

而使用bigpipe只需要一个请求足以。

引用淘宝文章里面的:

BigPipe 比AJAX 有三个好处:

AJAX 的核心是XMLHttpRequest,客户端需要异步的向服务器端发送请求,然后将传送过来的内容动态添加到网页上。如此实现存在一些缺陷,即发送往返请求需要耗费时间,而BigPipe 技术使浏览器并不需要发送XMLHttpRequest 请求,这样就节省时间损耗。

使用AJAX时,浏览器和服务器的工作顺序执行。服务器必须等待浏览器的请求,这样就会造成服务器的空闲。浏览器工作时,服务器在等待,而服务器工作时,浏览器在等待,这也是一种性能的浪费。使用BigPipe,浏览器和服务器可以并行同时工作,服务器不需要等待浏览器的请求,而是一直处于加载页面内容的工作阶段,这就会使效率得到更大的提高。

减少浏览器发送到请求。对一个5亿用户的网站来说,减少了使用AJAX额外带来的请求,会减少服务器的负载,同样会带来很大的性能提升。

传统页面加载:

用户访问网页,浏览器发送一个HTTP 请求到网络服务器

服务器解析这个请求,然后从存储层去数据,接着生成一个html 文件内容,并在一个HTTP Response 中把它传送给客户端

HTTP response 在网络中传输

浏览器解析这个Response ,创建一个DOM 树,然后下载所需的CSS 和JS文件

下载完CSS 文件后,浏览器解析他们并且应用在相应的内容上

下载完JS 后,浏览器解析和执行他们

bigpipe加载:

Request parsing:服务器解析和检查http request

Datafetching:服务器从存储层获取数据

Markup generation:服务器生成html 标记

Network transport : 网络传输response

CSS downloading:浏览器下载CSS

DOM tree construction and CSS styling:浏览器生成DOM 树,并且使用CSS

JavaScript downloading: 浏览器下载页面引用的JS 文件

JavaScript execution: 浏览器执行页面JS代码

综上,bigpipe是很实用的,facebook和国内的新浪都是用的这种优化办法,所以可以放心大胆的使用

在http://engineering.xueqiu.com/blog/2013/02/27/implementing-bigpipe-in-nodejs/

这篇文章中已经很好的演示了,如何使用node实现;

我结合angularjs,组合的案例:

https://github.com/tangguangyao/bigpipe

用到一个bigpipe.js来自《深入浅出nodejs》

var Bigpipe=function(){
this.callbacks={};
}

Bigpipe.prototype.ready=function(key,callback){
if(!this.callbacks[key]){
this.callbacks[key]=[];
}
this.callbacks[key].push(callback);
}

Bigpipe.prototype.set=function(key,data){
var callbacks=this.callbacks[key]||[];
for(var i=0;i

你可能感兴趣的:(web)