1. 浏览器发送一个HTTP请求到Web服务器。
2. Web服务器解析请求，然后读取数据存储层，制定一个HTML文件，并用一个HTTP响应把它发送到客户端。
3. HTTP响应通过互联网传送到浏览器。
4. 浏览器解析Web服务器的响应，使用HTML文件构建了一个的DOM树，并且下载引用的CSS和JavaScript文件。
5. CSS资源下载后，浏览器解析它们，并将它们应用到DOM树。
6. JavaScript资源下载后，浏览器解析并执行它们。
package com.pipe.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Callable;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
import java.util.concurrent.TimeUnit;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.pipe.dao.DbDao;
import com.pipe.dao.impl.DbDaoImpl;
/**
* 处理请求的Servlet
* Class Name: BigPipeServlet.java
* @author zhangyu DateTime 2012-7-10 下午5:53:21
*/
public class BigPipeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,
IOException {
ExecutorService executor = Executors.newFixedThreadPool(3);//因为测试3个模块
final PrintWriter writer = response.getWriter();
//输出HTML
String doctype = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n"
+ " \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">";
String head = "<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"de\" lang=\"de\"> \n" + "<head> \n"
+ "<meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\" /> \n"
+ "<meta http-equiv=\"Content-language\" content=\"de\" />\n";
writer.write(doctype);
writer.write(head);
writer.write("<link href='pagelet.css' type='text/css' rel='stylesheet' />");
writer.write("<script type=\"text/javascript\" src=\"pagelet.js\"></script>");
writer.write("<script type=\"text/javascript\" src=\"jquery.js\"></script>");
writer.write("</HEAD><BODY><div>Progressive Loading");
content(writer, "content1", "content2", "content3");
writer.write("</div>\n");
final DbDao dbDao = new DbDaoImpl();
//年级Pagelet
List<Callable<Boolean>> tasks = new ArrayList<Callable<Boolean>>();
tasks.add(new Callable<Boolean>() {
public Boolean call() {
try {
Thread.sleep(1000);
pagelet(writer, "1", dbDao.getGrades().toString());//[{name:'aa'},{name:'bb'}]
} catch (InterruptedException e) {
e.printStackTrace();
}
return true;
}
});
//班级Pagelet
tasks.add(new Callable<Boolean>() {
public Boolean call() {
try {
Thread.sleep(2000);
pagelet(writer, "2", dbDao.getClasses().toString());
} catch (InterruptedException e) {
e.printStackTrace();
}
return true;
}
});
//学生Pagelet
tasks.add(new Callable<Boolean>() {
public Boolean call() {
try {
Thread.sleep(3000);
pagelet(writer, "3", dbDao.getUserInfo().toString());
} catch (InterruptedException e) {
e.printStackTrace();
}
return true;
}
});
try {
executor.invokeAll(tasks, 3100, TimeUnit.MILLISECONDS);
} catch (InterruptedException ignored) {
}
executor.shutdown();
writer.write("</BODY></HTML>");
writer.close();
}
private void content(PrintWriter writer, String... contentIds) {
for (String id : contentIds) {
writer.write("<div id=\"" + id + "\">-</div>\n");
}
}
private void pagelet(PrintWriter writer, String id, String content) {
if (writer.checkError())
return;
writer.write("<script>arrived(\"content" + id + "\",\"" + content + "\",\"\",\"\")</script>");
writer.flush();
}
}
pagelet.js主要负责加载对应模块的JS和CSS，然后加载，我曾试过直接加载JS，会报招不到方法，就用ajax加载JS和 CSS。
var i=0;
function arrived(id,text,js,css)
{
if(i==0)
{
$.ajax({
url:'http://localhost:8080/pipe/Iterator.js',
type: 'GET',
dataType: 'script',
success: function(xml){
IncludeJS(id,xml)
var html=iterator(text);//因为后头返回是JSON，所以每个模块提供以个解析JSON的JS，此处3个模块都一样逻辑。
var b=document.getElementById(id); b.innerHTML = html;
i++;
}
});
}else
{
var html=iterator(text);
var b=document.getElementById(id); b.innerHTML = html;
}
}
function IncludeJS(id, source)
{
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement( "script" );
oScript.language = "javascript";
oScript.type = "text/javascript";
oScript.id = 123;
oScript.defer = true;
oScript.text = source;
oHead.appendChild( oScript );
}
//每个模块对应的数据解析JS，这里3个业务一样，所以都加载Iterator
function iterator(json)
{
var str='<ul id="content_ul">';
var list=eval("("+json+")");//把Json转化为JS数组
for(var i=0;i<list.length;i++)
{
var obj=list[i];
str+='<li>'+obj.name+'</li>';
}
str+='</ul>';
return str;
}
body *{margin:0px;padding: 0px;}
#content1{width:100%;height:100px;border:1px solid }
#content2{width:20%;height:100%;float:left;border:1px solid ;}
#content3{width:80%;height:100%;border:1px solid ;margin-left:20%;}
#content_ul{list-style: none;margin-left:10px;}
分享到：
相关推荐
BigPipe技术java源代码,实现页面的单线程加载，和多线程加载，减少页面的加载时间
Bigpipe命令_V45_comref2
已调试成功，并做了优化，类似新浪微博BIGPIPE
bigpipe 基于struts2标签实现
NULL 博文链接：https://secondhrc.iteye.com/blog/1837984
bigpipe对应的tmsh命令及linux对应的tmsh命令，TMSH命令行操作bigpipe对应的tmsh命令及linux对应的tmsh命令
用asp.net mvc2.0 实现bigbipe技术，这只有C#部份代码，javascript部分还未实现，以后再补吧。
NET BIGPIPE 实现，前后台代码。
bigpipe-demo1 简单的 bigpipe 演示
Koa Bigpipe演示生成基础koa工程使用koa-bigpipe作为bigpipe库默认使用pug模板引擎 jQuery + bigpipe.js $ nvm use 7Now using node v7.9.0 (npm v4.2.0)$ npm start
net bigpipe 例子，调试成功
bigpipe-example, 使用koa和组件的[DEPRECATED] BigPipe BigPipe示例 使用 koa 和组件插件构建的应用程序，实现了facebook的 BigPipe 。给定 subreddit，这里应用程序执行以下操作：一个基于 horizontal-grid-...
自己实现的bigpipe，C# 实现，比较简单，可以正常运行
BigPipe 是 Facebook 开发的优化网页加载速度的技术。网上几乎没有用 node.js 实现的文章，实际上，不止于 node.js，BigPipe 用其他语言的实现在网上都很少见。以至于这技术出现很久以后，我还以为就是整个网页的...
NULL 博文链接：https://liaoke0123.iteye.com/blog/2312795
用C#实现的仿新浪微博首页数据的加载方式。测试了下谷歌和IE8都支持，同样的数据处理量：BigPipe加载方式耗时1.22秒，传统方式加载3.01秒。
测试我自己编写的koa-bigpipe-middlewary， 模拟bigpipe渲染技术 环境 node >= 8.x 执行 npm install node app.js 打开localhost:9000
用asp.net mvc2.0 实现bigbipe技术，该版修改了异步线程flush html错乱的bug与加入了bigpipe js框架。非常感谢http://my.csdn.net/SeaSunk提供的js框架。
BigPipe 是一个比较激进的 Node.js 的 Web 框架。其思路是使用多个可重用的网页部件来组合整个网页。这些部件称为 Pagelets ，然后通过在服务器和浏览器上进行不同的执行方法来组合。这使得前端页面可以按进度进行...
本文给大家分享的是使用nodejs结合bigpipe实现异步加载页面的方案，非常的实用，也是以后前端性能优化的一个方向，希望大家能够喜欢。