高性能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. 对相同id的input框的循环判断

    $("input[id=sl]").each(function(){ alert(10); });

  2. 以下各节已定义，但尚未为布局页“~/Views/Shared/_Layout.cshtml”呈现:“Scripts”。

    以下各节已定义,但尚未为布局页“~/Views/Shared/_Layout.cshtml”呈现:“Scripts”. 报错内容如下: 解决办法如下: 1.在_Layout.cshtml布局body内 ...

  3. 纯 CSS 创建各种不同的图形形状

    使用代码 矩形 .rectangle { width: 250px; height: 150px; background-color: #6DC75F; } <div></div&g ...

  4. Android开发手记(7) 按钮类控件的使用

    1.点击Button改变页面背景色 通过Button改变页面背景色,首先新建相应的对象,让后绑定到Layout上的元素. final RelativeLayout layout = (Relative ...

  5. ArcMap - 使用python更新列中的值

    概述:在外文网上,很多人都问在ArcMap中如何通过SQL修改属性字段的值,我见回答的人都说通过"Field Calculator",貌似不能直接通过SQL语句. 虽然学gis开发 ...

  6. union关键字 与大小端模式

    union 关键字(主要用来压缩空间,如果一些数据不可能同一时间同时用到,可是考虑使用union) union关键字声明的变量称之为联合体变量: (1)联合体变量只配置一个足够大的空间来容纳最大长度的 ...

  7. 测试RegExp对象的属性

    //测试RegExp对象的属性function testRegExpProperty(){ var regexp = /abc/; //regexp.ignoreCase = true; //无效 c ...

  8. REDIS学习（1）环境搭建

    1.下载 稳定版本的.tar.gz 包,解压到/usr/local/src/. 2 .cd 到文件夹下,不需要 configure 直接 make编译 ,成功之后,cd /usr/local/redi ...

  9. Matlab与外部接口：MAT文件基础

    MAT 文件MAT文件是MATLAB使用的一种特有的二进制数据文件.MAT文件可以包含一个或者多个MATLAB 变量.MATLAB通常采用MAT文件把工作空间的变量存储在磁盘里,在MAT文件中不仅保存 ...

  10. easyui 1.3.3 中combotree post传参问题

    重写Tree的loader,增加queryParams属性支持,并且增加setQueryParams方法 //重写tree的loader $.extend($.fn.tree.defaults, { ...