高性能WEB开发(11) - flush让页面分块,逐步呈现

在处理比較耗时的请求的时候，我们总希望先让用户先看到部分内容，让用户知道系统正在进行处理，而不是无响应。一般大家在处理这样的情况，都使用ajax，先把html输出到client，然后再用ajax取载入比較耗时的资源。用ajax麻烦的地方是添加了请求数，并且须要写额外的js代码、和js调用的请求接口。

正对这样的情况，另一种处理方法，就是让response分块编码进行传输。response分块编码，能够先传输一部分不须要处理的html代码到client，等其它耗时代码运行完成后再传输另外的html代码。

分块编码(chunked encoding)

chunked encoding 是http1.1 才支持编码格式(当然眼下没有哪个浏览器不支持1.1了)，chunked encoding 与一般的响应差别例如以下：

正常的响应：

HTTP/1.1 200 OK

Cache-Control: private, max-age=60

Content-Length: 75785

Content-Type: text/html; charset=utf-8

..其它response headers

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

chunked encoding 响应:

HTTP/1.1 200 OK

Cache-Control: private, max-age=60

Content-Length: 75785

Content-Type: text/html; charset=utf-8

Transfer-Encoding: chunked

..其它response headers

chunk #1(这里一般是16进制的数字，标志这个块的大小)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"....

chunk #2

<div .....

chunk #3

....</body></html>

实例(JSP)

一个简单的页面，分为头部(header)和内容(部分)，如果内容部分须要读取数据库，花费3秒时间,然后显示csdn的logo。header部分显示cnblogs的logo。代码例如以下：

<body>

	<div id="head" style="border:1px solid #ccc;">

	   cnblogs logo <img src="http://images.cnblogs.com/logo_small.gif" />

	</div>

	<br />

	<div id="content" style="border:1px solid blue;">

	<%

		// 睡眠3秒

		Thread.currentThread().sleep(3000);

	%>

		csdn logo<br />

		<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" />

	</div>

</body>

演示地址：http://213.186.44.204:8080/ChunkTest/nochunk.jsp (server比較差，请大家温和点)

打开这个演示地址发现非常正常的页面，在3秒后才開始下载显示2个logo，资源载入瀑布图例如以下：

如今把代码改成例如以下，加上flush，让response把之前的html分块输出：

<div id="head" style="border:1px solid #ccc;">

   cnblogs logo <img src="http://images.cnblogs.com/logo_small.gif" />

</div>

<%

	out.flush(); // flush response，分块输出

%>

<br />

<div id="content" style="border:1px solid blue;">

	<%

		// 睡眠3秒

		Thread.currentThread().sleep(3000);

	%>

	csdn logo<br />

	<img src="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" />

</div>

演示地址：http://213.186.44.204:8080/ChunkTest/chunk.jsp

打开这个演示地址，是不是发现cnblogs logo先下载显示出来，3秒后csdn logo才显示，资源载入图例如以下：

从这个图发现，cnblogs的logo在jsp页面还没运行完就開始下载了，这就是分块输出的效果。

监控工具：

怎样知道我们是否成功使用了chunk encoding了 ，仅仅要用工具查看response header 中是否包括了Transfer-Encoding: chunked，假设包括了，则是分块了。但要想监控分块的具体信息，据我所知，眼下仅仅有httpwatch支持，能够查看我们究竟分了多少块，可是数量好像都多显示了1个，例如以下图：

有须要请查看：高性能WEB开发系列

高性能WEB开发(11) - flush让页面分块,逐步呈现的更多相关文章

  1. 高性能WEB开发：深入理解页面呈现、重绘、回流

    在讨论页面重绘.回流之前.需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程.可能不同的浏览器略微会有些不同.但基本上都是类 ...

  2. 高性能WEB开发：重排与重绘

    DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构——DOM树和渲染树. D ...

  3. 高性能Web开发系列

    1. 高性能WEB开发基础 http://www.uml.org.cn/net/201404225.asp 2. 高性能WEB开发进阶(上) http://www.uml.org.cn/net/201 ...

  4. 在 Web 开发中，img 标签用来呈现图片，而且一般来说，浏览器是会对这些图片进行缓存的。

    在 Web 开发中,img 标签用来呈现图片,而且一般来说,浏览器是会对这些图片进行缓存的. 比如访问百度,我们可以发现,图片.脚本这种都是从缓存(内存缓存/磁盘缓存)中加载的,而不是再去访问一次百度 ...

  5. 高性能WEB开发(6) - web性能測试工具推荐

    WEB性能測试工具主要分为三种.一种是測试页面资源载入速度的,一种是測试页面载入完成后页面呈现.JS操作速度的,另一种是整体上对页面进行评价分析,以下分别对这些工具进行介绍,假设谁有更好的工具也请一起 ...

  6. web开发模式小结：页面乱码和跳转

    本文由付老师总结书写 java开发模式: (1)第一种开始模式:javaBean+jsp : 优点:可以为web程序在jsp中减少java代码量 适用于该开发模式的jsp的动作元素:<jsp:u ...

  7. 高性能WEB开发：Javascript自身执行效率

    Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入 我们在编码过程中多多少少会使用到一些全局变 ...

  8. 高性能WEB开发 为什么要减少请求数，如何减少请求数!

    http请求头的数据量 [声明] 转载  原文出处:http://www.blogjava.net/BearRui/. 谢谢我们先分析下请求头,看看每次请求都带了那些额外的数据.下面是监控的googl ...

  9. 高性能web开发：如何加载js，，js的存放位置

    外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 有人会问:为什么JS不能像 ...

随机推荐

  1. Java学习之路（一）了解Java

    Java“白皮书”的关键术语 1)简单性 相对于C++:没有头文件.指针运算.结构.联合.操作符重载.虚基类. 另一方面是小:java微型版(Java Micro Edition)用于嵌入式设备 2) ...

  2. SGU131--NYOJ435

    参考blog http://m.blog.csdn.net/blog/u012760629/36927465 http://www.cppblog.com/menrowitianya/archive/ ...

  3. ASP.NET实现省市区三级联动（局部刷新）

    跟前一篇ASP.NET实现年月日三级联动(局部刷新)一样,没什么技术含量,直接上代码 <asp:ScriptManager ID="ScriptManager1" runat ...

  4. MySQL分支Percona，折腾中，先科普一下

    官方网站:http://www.percona.com/ Percona 为 MySQL 数据库服务器进行了改进,在功能和性能上较 MySQL 有着很显著的提升.该版本提升了在高负载情况下的 Inno ...

  5. RBAC角色权限控制

    RBAC角色权限控制 1. user (用户表) *  用户的基本信息(mid:用户信息id  如图) 2. node (节点表) * 页面(模块\控制器\方法) 3. role_node(角色.节点 ...

  6. osg三维重建的两种方法剖析：三角面片（osgUtil::DelaunayTriangulator）和四角面片（osg::HeightField） (2)

    // perform very basic sanity-check validation on a heightfield.bool validateHeightField(osg::HeightF ...

  7. mysql命中索引规律

    就算where条件里写了and两个条件,然后建了2个独立索引,1个组合索引,他具体命中哪个是不确定的,他会根据数据分布情况选择. 比如 possible_keys    :f1,f2,f1f2,有三种 ...

  8. javascript解析从服务器返回的json格式数据

    在javascript中我们可以将服务器返回的json格式数据转换成json格式进行使用,如下: 1.服务器返回的json格式数据: 通过response.responseText获得: " ...

  9. angular 引入 component 报错

    每天抽出一些时间学习 Angular2 ,并准备把手头上的项目移植为 Angular2 , 不过今天又遇到了一些小问题. 准备写一个导航类适于管理后台常见的右边导航,如博客园的这种: ! 使用 g g ...

  10. 如何解析复杂的C语言声明

    C语言中有时会出现复杂的声明,比如   char * const * (*next) (); //这是个什么东东?   在讲复杂声明的分析方法前,先来个补充点.   C语言变量的声明始终贯彻两点 :  ...