之前一个同学问我搞过bigpipe没有,当时也不知道这个是什么东东,网上找了一些资料之后自己实现了一个。
bigpipe的大体思路是分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。
具体的概念和优缺点就不在这里复制粘贴了,网上一大把,有兴趣的可以在:
http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html 看一看
bigpipe的页面结构很简单,它分成主页面和子页面(pagelet)2个部分。
服务器向浏览器发送响应时候,先把主页面的内容flush出来。然后服务器开启数个线程对各个子页面进行处理,完成之后一个一个flush到主页面的底部。
先看一下主页面代码例子:
<body>
<div id="p1"></div>
<div id="p2"></div>
<div id="p3"></div>
sdfsfasfdafsdf
</body>
例子很简单,p1、p2、p3就是用来定义3个pagelet的位置的。当子页面被flush到页面尾部后,通过一个json字符串定义子页面的内容、样式、和javascript代码。
json格式如下:
{
pid:string, //pid定义了这个pagelet需要放置的页面位置,对应主页面的p1、p2、p3
css:string, //定义该pagelet需要用到的css文件
js:Array, //定义pagelet用到的数个js文件
html:string //pagelet的html内容
}
根据这个json的格式后台给页面输出的内容大概是这样样子的:
<script>bigpipe.create({"css":"/bigpipe/css/page2.css","html":"\r\n\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n2:null <br>\r\n\r\n","js":["/bigpipe/js/page2.js"],"path":"/pagelet2.jsp","pid":"p2"});</script>
每一个pagelet被flush之后会立即调用bigpipe.create:
var bigpipe = (function () {
var headObj = document.getElementsByTagName("head")[0];
var bodyObj = document.getElementsByTagName("body")[0];
function loadCss(obj,fn) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = obj.css;
headObj.appendChild(link);
Event.bind(link,"load",function(){
fn(obj);
});
}
function loadJs(jsSrc) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = jsSrc;
bodyObj.appendChild(script);
}
return {
create:function (obj) {
if (!obj.pid) {
return;
}
var fn=function(obj){ //注意一下这里,html和js不是立即写入页面中,而是作为回调函数等css加载完毕后再写入。
Log.d(obj);
document.getElementById(obj.pid).innerHTML=obj.html; //指定位置填写html代码
for(var i=0,len=obj.js.length;i<len;i++){
loadJs(obj.js[i]); //加载js文件
}
}
loadCss(obj,fn); //加载css
}
};
})();
pagelet组件加载的顺序是:css-->html-->js。由于css是异步加载的,如果先写入html再加载css可能会影响用户体现,为了保证让css加载完毕后才显示网页内容,注意一下loadcss方法,这里是等到css加载完毕后才写入html和加载js。
代码如附件(注:这里用到了公司的一个写日志的jar包,压缩包里是没有的,如果想编译通过把openEAP的依赖去掉然后把所有写日志的部分注释掉就行)
分享到:
相关推荐
高性能页面加载技术是现代Web开发中的重要议题,旨在提升用户体验,减少用户等待时间。...在Java环境中实现BigPipe,需要结合服务器端和前端技术,充分利用现代Web栈的优势,以实现最佳的页面加载性能。
在Java实现中,我们可以关注以下几个关键技术点: 1. **模块化与异步处理**:BigPipe将页面拆分成独立的模块,每个模块可以单独处理和渲染。这些模块通常包括动态内容(如新闻feed)和静态组件(如导航栏)。Java中...
在Java实现中,BigPipe技术可以支持单线程和多线程加载策略。单线程加载虽然简单,但可能会限制并行处理的能力,导致页面加载速度的上限。而多线程加载则能充分利用现代多核处理器的性能,将不同Pagelet的加载任务...
在Java Web环境中,结合`Struts2`框架,我们可以实现`BigPipe`技术,以提升基于`Struts2`应用的性能。 `BigPipe`的核心思想是将一个大的HTML页面拆分为多个小的部分(通常称为Pagelets),每个部分独立加载和渲染。...
Webx是一个基于Java的开源Web框架,而BigPipe则是Webx框架中的一个特性,用于实现快速、高效的页面分片加载。 在传统的网页加载过程中,浏览器会等待所有资源下载完毕后再一次性渲染页面,这可能导致用户看到空白页...
BigPipe的主要思想是实现浏览器和服务器的并发执行,实现页面的异步加载从而提高页面加载速度.为了达到这个目的,BigPipe首先根据页面的功能或位置将一个页面分成若干模块(模块称作pagelet),并对这几个模块进行...
Struts2 是一个流行的 Java Web 框架,而 BigPipe 技术则是 Facebook 提出的一种优化页面加载速度的方法,它借鉴了服务器端渲染的优势,将大型页面拆分为多个小块,逐个加载,从而显著提高了页面的加载效率。...
plumber 是一款实现页面 pagelet 并发执行的 java web 框架,支持以 的方式返回你的 pagelet 执行结果,以一切可能并发的方式提高你的页面响应速度。 ##Core Features 支持将页面划分成多个可以并发执行的 pagelet ,...
SpringMVC是一个强大的Java web应用程序开发框架,它是由Spring生态系统的一部分,主要负责处理HTTP请求和响应,实现了模型-视图-控制器(MVC)的设计模式。这个“springMVC纯净工程”应该是一个专为电子商务或其他...
- **Pipe支持:**类似于Facebook的BigPipe技术,优化页面加载速度。 - **上传文件:**提供文件上传功能的支持。 **3.2 DAO层:** - **基本配置与使用:**介绍如何配置和使用DAO层,实现数据访问操作。 - **SQLParm...
- **Portal/pipe**:类似于Facebook BigPipe的机制,支持多线程运行,提高页面加载速度。 - **相关URL**:http://code.google.com/p/paoding-rose/wiki/Rose_SJ ##### 10. Thrift - **功能简介**:Apache Thrift是...
这里的“静态化”不仅指将HTML页面完全存储在磁盘上,也可以是指通过Java系统产生的页面,但页面本身不包含上述提到的因素。 ##### 2. 为什么进行静态化架构设计 面对高并发场景下的挑战,静态化架构设计成为了...