高性能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. oracle、db2、sybase大型数据库面试总结

    1. oracle数据库单例.多例模式. 数据库创建之后会有一系列为该数据库提供服务的内存空间和后台进程,称为该数据库的实例. 每一个数据库至少会有一个实例为其服务. 2. mysql获取字段的长度用 ...

  2. java中保留几位小数

    public class NumUtils { /** * 保留两位小数 * * @param d * @return */ public static String get2Wei(double d ...

  3. JavaWeb学习笔记之JSP（一）

    1. JSP: 1.1. 为什么需要 JSP ? 如果使用Servlet程序来输出只有局部内容需要动态改变的网页,但是其中的静态网页内容也需要程序员使用Java语言来进行输出,这就造成了大量代码的冗余 ...

  4. QT5控件-QDateTimeEdit和类QDateTime

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QDateTime> #i ...

  5. Oracle数据库之事务

    Oracle数据库之事务 1. 什么是事务 在数据库中事务是工作的逻辑单元,一个事务是由一个或多个完成一组的相关行为的SQL语句组成,通过事务机制确保这一组SQL语句所作的操作要么都成功执行,完成整个 ...

  6. 使用padding-top实现自适应背景图片

    在父级容器中设定最大的宽度,由于背景图片会出现塌陷的情况,有宽度无高度, 则,在图片容器中添加以下属性 padding-top:%(计算方式:图片的高度/图片的宽度*100%) background- ...

  7. JQUERY1.9学习笔记 之基本过滤器(七) 语言选择器

    语言选择器 jQuery( ":lang(language)" ) 描述:选择所有用特定语言指定的标签. 根据标签指定语言的不同给标签上色. <!DOCTYPE html&g ...

  8. mysql中的JOIN用法总结

    join是mysql中一个基础的关键词,一般在多表连接查询中使用,这里做一下总结 1.JOIN的语法格式 table_references: table_reference [, table_refe ...

  9. php explode 用法详解

    定义和用法explode() 函数把字符串分割为数组. 语法explode(separator,string,limit)参数 描述 separator 必需.规定在哪里分割字符串.string 必需 ...

  10. java中ExecutorService接口

    一.声明 public interface ExecutorService extends Executor 位于java.util.concurrent包下 所有超级接口:Executor 所有已知 ...