首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

基于 Struts2 标签的 BigPipe 技术实现(2)

基于 Struts2 标签的 BigPipe 技术实现(2)

示例展示为了让读者对本文所讲内容有一个实际的印象,提升您对该技术的兴趣,本文以一个例子,采用三种实现方式来实现。该例子实现了一个 2*3 的表格,按从左到右、从上到下的顺序(也就是文档流模型的加载顺序),标明了序号。每个单元格的内容,都使用 Thread.sleep 方法模拟了加载时间较长的 HTML 内容。按照文档流顺序,每个单元格的线程等待时间分别是 1、2、3、4、5、6 秒。我们观察三种实现方式:普通实现、单线程 BigPipe、多线程 BigPipe,看它们对结果的影响。
示例程序在附件部分,它是一个 JEE Eclipse 工程,读者可以到 下载 JEE Eclipse,下载后导入工程。另外运行示例程序需要 Tomcat 6+ 的支持。
普通方式打开附件,查看 WebContent 下的 normal.jsp 源码,如清单 1 所示。
清单 1. normal.jsp 源码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%long pstart = System.currentTimeMillis();%>
<table border="1" width="100%" height="500">
  <caption> 普通例子 </caption>
  <tr>
    <td>
    <%
long start = System.currentTimeMillis();
Thread.sleep(1000);
long seconds = System.currentTimeMillis() - start;
%>
1 秒的内容 <br>
加载耗时:<%=seconds%> 毫秒 ;
    </td>
    // 中间的省略
    //...
    <td>
    <%
start = System.currentTimeMillis();
Thread.sleep(6000);
seconds = System.currentTimeMillis() - start;
%>
6 秒的内容 <br>
加载耗时:<%=seconds%> 毫秒 ;
    </td>
  </tr>
</table>
<%seconds = System.currentTimeMillis() - pstart;%>
整个页面加载耗费了:<%=seconds%> 毫秒




这是一个再普通不过的 JSP 文件,用 Thread.sleep 模拟长时间的 HTML 加载。运行附件工程,打开 http://localhost:{your port}/BigPipeImpl/normal.jsp。接下来等待我们的就是一个很长时间的等待,浏览器一直处于白屏的状态,最终会出现如图 1 的结果。
图 1. 普通实现方式的结果()普通方式的实现缺点明显,从这个例子我们就可以知道,如果你的网页很大,这将直接导致用户无法等待。为了给出更加准确的用户等待时间,使用 Firebug 的网络监测功能,查看网页的加载时间,结果如图 2 所示。
图 2. 普通实现的加载时间()可以看到,该页面的加载时间是 21.02 秒,试问有哪个用户会忍受这么长时间的页面空白呢?
该实现方式的效果也在预料之内,表格按照文档流的顺序进行加载,也就是按照单元格的编号顺序逐个加载,直到页面全部加载完才一口气写回到浏览器,这样用户必须等待较长的时间。
单线程方式普通方式的用户体验很差,要想增强用户体验就可以用到单线程 BigPipe 技术。单线程的实现方式,本质上与普通方式一样,但是不一样的是它可以将优先级高的区域提前加载,并且可以先将网页结构写回客户端,然后再显示内容,增强用户体验。本文的单线程示例程序,单元格内容的加载顺序是可以编程设置的,不一定需要按照文档流的顺序。由于增加了客户端的 JavaScript 处理,在总时间上会略微多于普通方式,但是在用户体验效果却远远优于普通方式。当我们编程设置单元格显示顺序按照 1-6 显示时(后半部分为展示如何设置顺序),打开 http://localhost:{your port}/BigPipeImpl/single.action,效果如图 3 所示。
图 3. 单元格 1-6 顺序的单线程加载结果()可以看到,打开不久,表格的框架就显示了出来,接下来,就会逐个的显示单元格的内容,其他的单元格则显示加载状态,等到他加载完毕,我们再通过 Firebug 查看它的加载时间,如图 4 所示。
图 4. 单元格 1-6 顺序的单线程加载时间()可以看到,网页的加载时间与普通实现方式一样,但是却带来了普通实现方式不可比拟的用户体验,有时候用户只希望网页及时的给他回馈,让用户充满希望。有人说,这用 Ajax 一样可以实现,但是请再看图 4,我们看到,浏览器发出的请求只有一个 single.action,再没有别的请求,这大大减轻了服务器端的压力。又有人说,可以在每加载一个内容完毕的时候,执行 flush 操作。的确,这样可以实现图 3 的效果,但是,如果我想实现 6-1 的显示顺序呢,flush 就无能为力了,而用单线程 BigPipe,却可以通过简单的调整代码顺序,来改变加载顺序,6-1 顺序的显示结果如图 5 所示。
图 5. 单元格 6-1 顺序的单线程加载结果()从上图我们看到,这次的加载顺序,是按照 6-1 的显示顺序,总时间不变。这个功能很重要,有时候,重要的内容在文档流的后方,而我们想让它显示的优先级变高,那么单线程的实现方式将非常实用。
返回列表