基于 Struts2 标签的 BigPipe 技术实现（2）

look_w

示例展示为了让读者对本文所讲内容有一个实际的印象，提升您对该技术的兴趣，本文以一个例子，采用三种实现方式来实现。该例子实现了一个 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 的显示顺序，总时间不变。这个功能很重要，有时候，重要的内容在文档流的后方，而我们想让它显示的优先级变高，那么单线程的实现方式将非常实用。