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;}
分享到:
相关推荐
### 三、net bigPipe实践 在.NET环境中,我们可以利用 ASP.NET MVC 或 ASP.NET Core 来实现bigPipe。例如,`BigPipe.sln` 可能是一个包含解决方案的文件,它可能包含了多个项目,其中一个主要项目负责实现bigPipe的...
通过理解和实践BigPipe设计,开发者可以为用户构建更快、更流畅的Web应用,提高用户满意度,同时也为SEO和性能优化提供了新的思路。在Java环境中实现BigPipe,需要结合服务器端和前端技术,充分利用现代Web栈的优势...
【C#实现仿新浪微博BigPipe】是一个针对网页加载性能优化的技术实践,主要目的是通过C#编程语言模仿新浪微博的高效数据加载策略——BigPipe。BigPipe是Facebook提出的一种页面加载技术,它通过将一个网页拆分成多个...
Facebook的BigPipe是一种高效网页加载技术,旨在提升用户体验,通过分块加载页面内容来显著减少...记住,理解并实践BigPipe不仅涉及技术实施,还涉及对用户心理的把握,因为快速响应的网页能增强用户的满意度和留存率。
**大管道(BigPipe)技术简介** 大管道(BigPipe)是一种优化网页加载速度的...同时,这也是对JavaScript异步编程和DOM操作的一个很好的实践案例。对于希望优化Web应用性能的开发者来说,这是一个值得深入研究的示例。
【BigPipe技术详解与Node.js实现】 BigPipe是由Facebook开发的一种网页加载优化技术,旨在显著提升用户在浏览网页时的加载速度。...在实践中,可以根据具体需求进行扩展和调整,以适应各种复杂的网页架构。
Vue服务器端渲染(SSR)和API代理(API Proxy)的实践是前端工程构建中的一项重要技能,尤其在提高网页加载速度、优化搜索引擎优化(SEO)和提供更好的用户体验方面发挥着关键作用。本文将深入探讨Vue SSR的原理、...
周骞所在的淘宝网在实践前后端分离模式中,采取了多种措施,包括建立前后端分离的开发流程、使用Node.js作为中间层来桥接前端和后端、以及使用bigpipe等技术提升页面性能。Node.js作为一个基于Chrome V8引擎的...
### 百度前端性能监控与优化实践 #### 一、性能监控平台 百度前端团队构建了一个全面的性能监控平台,旨在实现对各个产品线的统一性能监控。该平台设计的目标包括: - **产品线统一性**:确保所有产品能够在一个...
- **Portal/pipe**:类似于Facebook BigPipe的机制,支持多线程运行,提高页面加载速度。 - **相关URL**:http://code.google.com/p/paoding-rose/wiki/Rose_SJ ##### 10. Thrift - **功能简介**:Apache Thrift是...
4. **性能优化**:前端有更多的优化空间,如利用Comet、Bigpipe等技术提高页面加载速度。 【怎么做前后端分离】: 1. **接口设计**:后端提供RESTful API,仅处理数据的增删改查和业务逻辑,前端通过API请求数据。 ...
而最近 2 年,基于阿里巴巴的技术体系,我们对 PC、H5 多端进行了技术改造。在 2019 年,React SSR 第一次且成功地扛起双 11 重任,具有一定意义。...2) 从 Bigpipe+JQuery 到 React SSR,性能明显提升。PC 页
”中,我们可以提炼出许多相关的知识点,接下来将详细介绍这些知识点及其背后的技术和应用。...尽管新技术存在兼容性的问题,但通过不断实践和创新,我们不应轻易放弃,而是应积极寻找解决方案,推进Web技术的发展。
- **Pipe支持:**类似于Facebook的BigPipe技术,优化页面加载速度。 - **上传文件:**提供文件上传功能的支持。 **3.2 DAO层:** - **基本配置与使用:**介绍如何配置和使用DAO层,实现数据访问操作。 - **SQLParm...
案例分析部分,书中的实际案例将理论知识与具体实践结合,例如Facebook的BigPipe技术,通过分页加载提高页面渲染速度;Netflix的混沌工程,通过模拟故障来增强系统的健壮性;以及阿里巴巴的双11大促背后的技术挑战和...
微前端的工程实践还在不断演变,比如OpenComponents、iCestark、qiankun、乾坤等都是实现微前端的实践方案。微前端的发展还涉及到如何利用OpenAPI、编排工具、UI组件库等来构建和集成微应用,以及如何处理微应用与小...
### 知识点二:模块化的优势及实践案例 #### 优势分析 - **提高开发效率**:减少重复劳动,加快开发进度。 - **易于维护**:模块化使得代码更加清晰,便于后期维护和升级。 - **增强灵活性**:模块可以根据需求灵活...
【标题】:“Web前端教程:Node.js的前后端分离模式” 【描述】:该教程旨在解决传统...通过学习和实践Node.js的前后端分离模式,开发者可以更好地适应多终端时代的需求,为构建高性能、易维护的Web应用打下坚实基础。
6. **性能优化**: Drupal灵活的缓存机制和性能插件有助于提高网站速度,如BigPipe、Page Cache和Database Connection Pooling等。这些工具可以帮助开发者优化大型或高流量网站的性能。 7. **多语言支持**: Drupal...