文档章节

Bigpipe实践

壹丶贰
 壹丶贰
发布于 2016/06/20 16:20
字数 748
阅读 5
收藏 0
点赞 0
评论 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
西安
jboot怎么调用main方法获取数据库数据来进行测试?

海哥,jboot如何直接在main方法中,调用查询数据库中的数据进行测试呢?类似下图,现在直接运行肯定是报空指针错误的。

your233 ⋅ 04/02 ⋅ 0

基于Spring MVC的BigPipe演进之路

基于NodeJS的前后端分离时代的到来,传统的后端Freemarker是否可能做得更好呢?这篇文章主要介绍作者基于Spring MVC对BigPipe的实践,下面直接进入正题。 普通方式 对于复杂页面我们常常会将...

Float_Luuu ⋅ 2016/01/11 ⋅ 10

前端性能优化--从 10 多秒到 1.05 秒

关于 性能优化 是个大的面,这篇文章主要涉及到 前端 的几个点,如 前端性能优化 的流程、常见技术手段、工具等。 提及 前端性能优化 ,大家应该都会想到 雅虎军规,本文会结合 雅虎军规 融入...

子木_lsy ⋅ 05/28 ⋅ 0

BigPipe:高性能的“流水线技术”网页

原文地址:http://www.facebook.com/note.php?noteid=389414033919 译文地址:http://isd.tencent.com/?p=2419 作者:蒋长浩 Facebook的网站速度做为最关键的公司任务之一。在2009年,我们成...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

BigPipe为什么可以节省时间?

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

悠悠然然 ⋅ 2013/10/21 ⋅ 0

BigPipe 学习研究

文章转自:http://www.searchtb.com/2011/04/an-introduction-to-bigpipe.html 1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒;...

红薯 ⋅ 2011/07/08 ⋅ 3

BigPipe学习研究

技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的 页面都要要花费6 秒;同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数...

林文安 ⋅ 2012/05/15 ⋅ 0

基础动态网页服务体系--Facebook BigPipe

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理 他们在不同阶段的运行。这是类似于大多数现代微处理器...

匿名 ⋅ 2010/11/03 ⋅ 0

PHP网络服务框架--zan

Zan PHP Framework Zan PHP是基于PHP协程的网络服务框架,提供最简单的方式开发面向C10K+的高并发HTTP服务或SOA服务。 核心特效 基于 yield 实现了独立堆栈的协程 类似于 Golang 的并发编程模...

demon666 ⋅ 2016/07/21 ⋅ 0

基于 Struts2 标签的 BigPipe 技术实现

Facebook 介绍了一个名为 BigPipe 的技术,这项技术可使 Facebook 站点的访问速度提升一倍。目前,也有一小部分文章介绍了该技术在 JSP 中的实现,但是这些文章只是基于 Servlet 的理论实现,...

IBMdW ⋅ 2011/08/29 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 2分钟前 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 18分钟前 ⋅ 0

eclipse酷炫大法之设置主题、皮肤

eclipse酷炫大法 目前两款不错的eclipse 1.系统设置 Window->Preferences->General->Appearance 2.Eclipse Marketplace下载【推荐】 Help->Eclipse Marketplace->搜索‘theme’进行安装 比如......

anlve ⋅ 26分钟前 ⋅ 0

vim编辑模式、vim命令模式、vim实践

vim编辑模式 编辑模式用来输入或修改文本内容,编辑模式除了Esc外其他键几乎都是输入 如何进入编辑模式 一般模式输入以下按键,均可进入编辑模式,左下角提示 insert(中文为插入) 字样 i ...

蛋黄Yolks ⋅ 31分钟前 ⋅ 0

大数据入门基础:SSH介绍

什么是ssh 简单说,SSH是一种网络协议,用于计算机之间的加密登录。 如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码...

董黎明 ⋅ 49分钟前 ⋅ 0

web3j教程

web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 汇智网最新发布的web3j教程,详细讲解...

汇智网教程 ⋅ 57分钟前 ⋅ 0

谷歌:安全问题机制并不如你想象中安全

腾讯科技讯 5月25日,如今的你或许已经对许多网站所使用的“安全问题机制”习以为常了,但你真的认为包括“你第一个宠物的名字是什么?”这些问题能够保障你的帐户安全吗? 根据谷歌(微博)安...

问题终结者 ⋅ 57分钟前 ⋅ 0

聊聊spring cloud gateway的RedisRateLimiter

序 本文主要研究下spring cloud gateway的RedisRateLimiter GatewayRedisAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/gateway/con......

go4it ⋅ 今天 ⋅ 0

169. Majority Element - LeetCode

Question 169. Majority Element Solution 思路:构造一个map存储每个数字出现的次数,然后遍历map返回出现次数大于数组一半的数字. 还有一种思路是:对这个数组排序,次数超过n/2的元素必然在中...

yysue ⋅ 今天 ⋅ 0

NFS

14.1 NFS介绍 NFS是Network File System的缩写 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导开发,最新为4.1版本 NFS数据传输基于RPC协议,RPC...

派派菠菜 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部