高性能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. RadioGroup单选按钮排版

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  2. setTimeout()与setInterval()方法区别介绍

    计时器setTimeout()和setInterval()两个都是js的计时功能的函数两个有些区别,下面为大家简单介绍下,希望对大家有所帮助   计时器setTimeout()和setInterval ...

  3. mongodb查询之模糊查询

    mongodb的模糊查询是用正则表达式来实现的.例子如下: db.COMMODITY_COMMODITY_SHOP.find({name:{$regex :/南京/i}})

  4. phpMyAdmin配置及 错误 缺少 mysqli 扩展。请检查 PHP 配置

    PHPMyadmin配置文件config.inc.php内容如下,在需要设置的地方增加了相关注释.     非常适合对数据库操作命令不熟悉的数据库管理者,下面我就说下怎么安装该工具: 1.先到网上下载 ...

  5. Android弹性ScrollView

    开袋即食 import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; ...

  6. Android v2.0 基本概念 - 浅谈

    目录 Android框架 Linux Kernel 系统运行库 Libraries Android Runtime Application Framework Application Android框 ...

  7. CMD 下 进入 ORACLE

    .sqlplus /nolog .connect sys/orcl@ORCL as sysdba .select sysdate from dual exit;

  8. C程序设计语言练习题1-17

    练习1-17 编写一个程序,打印长度大于80个字符的所有输入行. 代码如下: #include <stdio.h> // 包含标准库的信息. #define MAXROW 10 // 最大 ...

  9. MBProgressHUD的基本使用

    MBProgressHUD的基本使用 分类: IOS2012-10-30 11:19 12047人阅读 评论(2) 收藏 举报 和gitHub上的Demo其实差不多,就是小整理了下,当备忘,想做复杂的 ...

  10. 如何给网页标题栏上添加图标(favicon.ico)

    favicon.ico详解:     favicon是Favorites Icon的缩写,favicon.ico是指显示在浏览器收藏夹.地址栏和标签标题前面的个性化图标. 设置步骤: 1. 把做好的f ...