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

look_w

基于 Struts2 的标签开发根据前面的分析，读者应该可以领略到 BigPipe 技术的优点了，为了让单线程和多线程版本更加实用，文章结合 Struts2 的标签技术，开发实现 BigPipe 技术，这样就可以让 Java 开发人员可以真正的将该技术用于实际。因此，这部分需要大致讲解一下 Struts2 自定义标签的开发方法。
实现基于 Struts2 的标签，需要重载两个类，org.apache.struts2.views.jsp.ComponentTagSupport 和 org.apache.struts2.components.Component，实现 ComponentTagSupport 类的 getBean 方法和 populateParams 方法，getBean 方法返回自定义 Component 的实例，populateParams 则是负责将页面传递的参数装配到 Component 里。在 Component 类里，需要重写 start 和 end 方法（也可以不重写），这两个方法分别代表标签的起始和标签的结束。最后再新建一个 tld 文件，来配置这个标签，由于篇幅限制，本文对 Struts2 的标签开发不多加解释，读者可以自行上网搜索相关资料。
单线程实现还记得单线程 BigPipe 的实现效果吗？它可以自定义页面模块的显示顺序。普通的 JSP 文档 , 它显示页面的顺序 , 是按照文档流的顺序 , 也就是从上到下 , 从左到右的生成。但是页面中的一些元素，我们希望它早点显示出来，但是往往它又在文档流的后半部分，前半部分耽误了很多时间，这可能直接导致用户因为看不到重要信息而不再等候，离开页面。有一些应用，用户只希望能看到希望（页面出现内容），而我们正文的内容需要访问数据库，可能稍微慢点，因此我们可以将文档的结构先显示给用户，文档内容再慢慢填充，这听起来像 Ajax，然而这不是，在 BigPipe 技术里，文档内容的填充只在一个请求内完成，而 Ajax 则可能发出多个请求，对服务器的压力较大，这在前面也已经多次提到，读者要谨记这个不同点。
单线程实现的原理是：网页的布局仍然是不重要的在上方，重要的在下方，但是对要显示的内容进行重新排序，重要的放在文档流上方，不重要的放在后方。当重要内容加载完之后，再使用 JavaScript 将内容移到原有的位置。因此，单线程需要两个标签，一个名为 bigPipeTo，是一个占位标签，在原有的位置。一个是 bigPipeFrom，它包含了需要显示的内容，它的原理图如图 10 所示。
图 10. 单线程原理图可以看到，如果按照普通的实现方式，网页是按照 PageLet1 To->PageLet2 To->PageLet3 To->PageLet4 To 的顺序加载内容。但是由于我们将内容放在了网页结构的下方，初始化为不可见，经过重新排序，顺序则变为了 2->3->1->4。bigPipeFrom 标签的内容，会经过 moveContent 的 JavaScript 方法移动到对应的 bigPipeTo 标签的位置。在本文的例子中，单线程的 JSP 使用代码如清单 2 所示。
清单 2. 单线程的 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

<%@ page language="java" contentType="text/html; charset=utf-8"     pageEncoding="utf-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="b" uri="/WEB-INF/bigpipe.tld"%>   <%long pstart = System.currentTimeMillis();%> <table border="1" width="100%" height="500">   <caption> 单线程例子 </caption>   <tr>     <td><b:bigPipeTo name="index1"> 编号：1     <img src="images/loading.gif"/></b:bigPipeTo></td>     <td><b:bigPipeTo name="index2"> 编号：2     <img src="images/loading.gif"/></b:bigPipeTo></td>     <td><b:bigPipeTo name="index3"> 编号：3     <img src="images/loading.gif"/></b:bigPipeTo></td>   </tr>    <tr>     <td><b:bigPipeTo name="index4"> 编号：4     <img src="images/loading.gif"/></b:bigPipeTo></td>     <td><b:bigPipeTo name="index5"> 编号：5     <img src="images/loading.gif"/></b:bigPipeTo></td>     <td><b:bigPipeTo name="index6"> 编号：6     <img src="images/loading.gif"/></b:bigPipeTo></td>   </tr> </table> <b:bigPipeFrom name="index6" bigPipeJSPath="js/bigpipe.js"> <% long start = System.currentTimeMillis(); Thread.sleep(6000); long seconds = System.currentTimeMillis() - start; %> 6 秒的内容 <br> 加载耗时：<%=seconds%> 毫秒 ; </b:bigPipeFrom> // 中间的 4 个由于篇幅限制，省略… <b:bigPipeFrom name="index1" bigPipeJSPath="js/bigpipe.js"> <% long start = System.currentTimeMillis(); Thread.sleep(1000); long seconds = System.currentTimeMillis() - start; %> 1 秒的内容 <br> 加载耗时：<%=seconds%> 毫秒 ; </b:bigPipeFrom> …

从清单 2 可以看出，bigPipeFrom 标签的 name 属性和 bigPipeTo 标签的 name 是一一对应的，这样在 bigPipeFrom 标签里的内容加载完以后，会准确的将内容移到对应 bigPipeTo 标签的位置。bigPipeFrom 标签对应类 BigPipeFrom 的关键代码如清单 3 所示。
清单 3. BigPipeFrom 关键代码

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 31 32 33 34 35

@Override public boolean start(final Writer writer) { boolean result = super.start(writer); try { writer.flush();// 刷新显示网页结构 // 用 DIV 包围内容 if (visiable) { writer.write("<div style='display:none' id='" + name + "_from'>"); } else { writer.write("<div id='" + name + "_from'>"); } } catch (IOException e) { e.printStackTrace(); } return result; } @Override public boolean end(Writer writer, String body) { boolean end = super.end(writer, body); try { //DIV 的结束，也就是该标签里的内容加载完毕 writer.write("</div>"); // 引入移动内容的 JavaScript 文件，就是 <script src=”…”></script> BigPipeWriter.instance().writeJavaScript(bigPipeJSPath, writer); // 调用 moveContent 方法的脚本代码 BigPipeWriter.instance().writeFromToTo(name, writer, copy); } catch (Exception e) { e.printStackTrace(); } return end; }

在清单 3 的 start 方法里，执行 flush，将已经加载的内容先写回浏览器，使用一个 div 包含主体内容。在 end 方法里，不仅要写回 div 的后半部分，还要将移动内容的 JavaScript 代码写回去。实际上就是 <script src=” js/bigpipe.js”></script><script>moveContent(fromDiv, toDiv);</script>。其中 moveContent 方法就是在 bigpipe.js 里定义的。为了让 bigPipeFrom 的内容知道要移动到什么位置，所以在 bigPipeTo 标签对应的 BigPipeTo 类里，需要用一个 div 包围，BigPipeTo 的代码如清单 4 所示。
清单 4. BigPipeTo 关键代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

public boolean start(final Writer writer) { boolean result = super.start(writer); try { writer.write("<div id='"+name+"'>"); } catch (IOException e) { e.printStackTrace(); } return result; } @Override public boolean end(Writer writer, String body) { boolean end = super.end(writer, body); try { writer.write("</div>"); } catch (IOException e) { e.printStackTrace(); } return end; }

最后，只要将 bigPipeFrom 标签里的 div 内容，移动到 bigPipeTo 的 div 里，就完成了。移动 div 内容的 JavaScript 代码非常简单，代码如清单 5 所示。
清单 5. JavaScript 移动内容的代码

1 2 3 4 5

function moveContent(fromId, toId) { document.getElementById(toId).innerHTML = document.getElementById(fromId).innerHTML; document.getElementById(fromId).innerHTML = ""; }

基于以上的代码实现，bigPipeFrom 使用的顺序，就是网页模块 PageLet 加载并显示的顺序，调整代码就等同于调整了加载顺序。达到了重要在前，次要在后的效果。