网站速度一直是互联网公司所关注的核心目标之一,作为SNS网站更是这样。来自世界第一大的打不开的SNS网站facebook的工程师日志中提到,BigPipe: Pipelining web pages for high performance。
HTTP协议
HTTP是一个客户端和服务器端请求和应答的标准,尽管TCP/IP协议是互联网上最流行的应用,HTTP协议并没有规定必须使用它和(基于)它支持的层。 事实上,HTTP可以在任何其他互联网协议上,或者在其他网络上实现。HTTP只假定(其下层协议提供)可靠的传输,任何能够提供这种保证的协议都可以被其使用。
在这里重新解释HTTP是为了后面做铺垫,一次http访问的过程如下:
1.打开一个连接后,客户机把请求消息送到服务器的停留端口上,完成提出请求动作;
2.服务器在处理完客户的请求之后,要向客户机发送响应消息;
3.客户和服务器双方都可以通过关闭套接字来结束TCP/IP对话。
在使用java的ServletResponse的时候,往往都是如下的操作返回结果到用户:
out.write(sb.toString());
out.flush();
out.close();
传统的WEB请求
以图1为例,一个WEB项目往往由不同的部分组成,不同的格局里往往代表需要从不同的数据表里去取不同的数据。
图1 人人网公共主页页面
一个用户来访问这个页面,按照传统的做法,其流程图可能是如图2这样的。
图2 一个传统的http请求过程
在图2中可以看到,一次打开网站页面的过程中,请求发到后端进行了处理(1和2步),只有当后端的取数据操作(2步)全部完成的时候,才可能进入第3步,向用户返回组装好的html页。如果说图1中一共有四个模块,对应后台有四条sql语句的话,那么,必须这四条sql语句全部返回了结果,才可能让用户看到页面。
pipe
pipe技术充分利用了前后端技术。将一个页面里的多个模块分成不同的window,多线程取数据的操作,然后再充分利用http请求的连接,将原来的输出,从一次flush变成多次flush:
out.write(“基础的dom”);
out.flush();
//数据一准备好时
out.write(“js带数据一”);
out.flush();
//数据十二准备好时
out.write(“js带数据二”);
out.flush();
out.close();
其过程如图3所示:
图3 pipe的请求过程
借用big pipe的代码,第一次是输出的:
<div>
<div id=”left_column”>
<div id=”pagelet_navigation”></div>
</div>
<div id=”middle_column”>
<div id=”pagelet_composer”></div>
<div id=”pagelet_stream”></div>
</div>
<div id=”right_column”>
<div id=”pagelet_pymk”></div>
<div id=”pagelet_ads”></div>
<div id=”pagelet_connect”></div>
</div>
</div>
当有了完整的dom结构时,浏览器就会开始显示没有数据的框架了。
后面的数据每次都以js继续发送到页面中,浏览器收到即开始写入:
<script type="text/javascript">
big_pipe.onPageletArrive({id: “pagelet_composer”, content=<HTML>, css=[..], js=[..], …})
</script>
性能
这种显示方式的性能,再借用facebook的图来表示之,如图4:
相关推荐
BigPipe技术java源代码,实现页面的单线程加载,和多线程加载,减少页面的加载时间
Bigpipe命令_V45_comref2
bigpipe 基于struts2标签实现
bigpipe对应的tmsh命令及linux对应的tmsh命令,TMSH命令行操作bigpipe对应的tmsh命令及linux对应的tmsh命令
已调试成功,并做了优化,类似新浪微博BIGPIPE
用asp.net mvc2.0 实现bigbipe技术,这只有C#部份代码,javascript部分还未实现,以后再补吧。
NULL 博文链接:https://secondhrc.iteye.com/blog/1837984
BigPipe 是一个比较激进的 Node.js 的 Web 框架。其思路是使用多个可重用的网页部件来组合整个网页。这些部件称为 Pagelets ,然后通过在服务器和浏览器上进行不同的执行方法来组合。这使得前端页面可以按进度进行...
NET BIGPIPE 实现,前后台代码。
自己实现的bigpipe,C# 实现,比较简单,可以正常运行
bigpipe-example, 使用koa和组件的[DEPRECATED] BigPipe BigPipe示例 使用 koa 和组件插件构建的应用程序,实现了facebook的 BigPipe 。给定 subreddit,这里应用程序执行以下操作:一个基于 horizontal-grid-...
NULL 博文链接:https://liaoke0123.iteye.com/blog/2312795
用C#实现的仿新浪微博首页数据的加载方式。测试了下谷歌和IE8都支持,同样的数据处理量:BigPipe加载方式耗时1.22秒,传统方式加载3.01秒。
BigPipe 是 Facebook 开发的优化网页加载速度的技术。网上几乎没有用 node.js 实现的文章,实际上,不止于 node.js,BigPipe 用其他语言的实现在网上都很少见。以至于这技术出现很久以后,我还以为就是整个网页的...
用asp.net mvc2.0 实现bigbipe技术,该版修改了异步线程flush html错乱的bug与加入了bigpipe js框架。非常感谢http://my.csdn.net/SeaSunk提供的js框架。
Koa Bigpipe演示生成基础koa工程使用koa-bigpipe作为bigpipe库默认使用pug模板引擎 jQuery + bigpipe.js $ nvm use 7Now using node v7.9.0 (npm v4.2.0)$ npm start
bigpipe-demo1 简单的 bigpipe 演示
net bigpipe 例子,调试成功
测试我自己编写的koa-bigpipe-middlewary, 模拟bigpipe渲染技术 环境 node >= 8.x 执行 npm install node app.js 打开localhost:9000
本文给大家分享的是使用nodejs结合bigpipe实现异步加载页面的方案,非常的实用,也是以后前端性能优化的一个方向,希望大家能够喜欢。