文档章节

Bigpipe实践

壹丶贰
 壹丶贰
发布于 2016/06/20 16:20
字数 748
阅读 5
收藏 0
 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;}
 

 

 

本文转载自:http://yu-zhang430.iteye.com/blog/1584749

共有 人打赏支持
壹丶贰
粉丝 0
博文 61
码字总数 10760
作品 0
西安
BigPipe为什么可以节省时间?

关于什么是BigPipe,请移步http://baike.baidu.com/view/4601904.htm去查阅一下。 在实现BigPipe的过程中,就对BigPipe到底能省多少时间比较奇怪。 普通的web页面,一般来说是页面生成,网络...

悠悠然然
2013/10/21
0
0
Facebook网站的Ajax化、缓存和流水线

演讲幻灯片: Facebook网站的Ajax化、缓存和流水线 [PDF] 在这个报告中,我将介绍在Facebook网站前端性能优化中采用的最主要的一些技术。这些技术不光降低了服务器的开销,而且同时极大地提高...

SeanCai
2011/05/28
0
0
基于NodeJS的全栈式开发(基于NodeJS的前后端分离)【转】

随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本。为了提升开发效率,前后端分...

程序员诗人
01/19
0
0
转:Facebook后台技术探秘

每月570000000000页面浏览量,每个月超过30亿的图片上传,5亿的用户数量,Facebook的后台是用哪些技术保障网站的流畅运行呢? 在今年举行的Facebook F8开发者大会上,51CTO带您了解了其最新的...

老淘
2010/12/10
0
1
url2sql原始想法及参考实现

首先YY一种前景,浏览器登录帐号,显示是一个简洁的IDE,编写保存刷新OK,网站完成。 在这样的一个设想中,在线编辑器(前端部分,如)的实现应该不是大的问题,后端涉及业务逻辑保存数据诸多...

高雷
2013/01/22
0
9

没有更多内容

加载失败,请刷新页面

加载更多

兄弟连区块链入门教程eth源码分析core-vm源码分析(二)

  兄弟连区块链入门教程eth源码分析core-vm源码分析(二),合约创建 Create 会创建一个新的合约。        // Create creates a new contract using code as deployment cod...

兄弟连区块链入门教程
2分钟前
0
0
python打造特别火的一个小游戏,16行代码实现3D撞球小游戏!

以下是制作上面炫酷动画所需的全部代码: 我们需要三组刚体(当您在Blender的对象上打开一个刚体的属性时,Blender将模拟与其它刚体的碰撞): 1.平面 第2行代码创建了一个简单的平面,立方体...

糖宝lsh
4分钟前
0
0
SQL语言分类

SQL(Structure Query Language)语言是数据库的核心语言。 SQL语言共分为四大类: 数据定义语言DDL,数据操纵语言DML,数据查询语言DQL,数据控制语言DCL。 数据定义语言DDL 数据定义语言DDL...

阿dai
7分钟前
0
0
UICollectionView的headerView、footerView使用以及与UITableView加载headerView、footerView的区别

前序 最近在一家公司实习,学习一些ios的知识。因为以前没有使用过UICollectionView,所以带我的导师让我仿照公司APP中的一个UICollectionView自己做一个练练手。期间遇到了一些问题:我们知...

壹峰
9分钟前
0
0
IMP-00017: following statement failed with ORACLE error 20005:

/*报错信息Export file created by EXPORT:V11.02.00 via conventional pathimport done in AL32UTF8 character set and AL16UTF16 NCHAR character setexport client uses ZHS16GBK char......

fengzhi714
12分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部