高性能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. Eclipse利用代理快速安装插件

    在eclipse启动时增加以下参数: eclipse.exe -vmargs -DproxySet=true -DproxyHost=aProxyAddress -DproxyPort=aProxyP ...

  2. 关于VS2013连接远程数据库服务器的蛋疼问题

    填写完用户名和密码后,点击数据库下拉菜单,接着就报错误

  3. C#Css/Js静态文件压缩--Yui.Compressor.Net

    一.Asp.Net 自带静态文件压缩工具包 Microsoft.AspNet.Web.Optimization http://www.nuget.org/packages/Microsoft.AspN ...

  4. java虚拟机涉及内存溢出

    Java语言写的代码是.java文件,它会被特定程序编译(javac.exe,它会被Eclipse之类的IDE调用)成字节码(bytecode),字节码不能直接在CPU上运行,需要另一个程序读取并执行 ...

  5. 回传值(代理、通知、block)

    回传值问题,一直都是困扰初学者的问题,今写者 代理.通知.block 三者的回传值做了一个小小的总结, Main.storyboard 视图: 通过代码分别创建三个代表 代理.通知.block 的按钮 ...

  6. PHP 运算符

    本章节我们将讨论 PHP 中不同运算符的应用. 在 PHP 中,赋值运算符 = 用于给变量赋值. 在 PHP 中,算术运算符 + 用于把值加在一起. PHP 算术运算符 运算符 名称 描述 实例 结果 ...

  7. 解决Windows服务1053错误方法

    WCF使用MSMQ绑定寄宿在Windows服务上,但启动服务时出现1053错误 在网上搜索了N多解决方案,都是比较高深的扯到原理和系统bug等问题 看了看到最后也没有解决,最终我决定使用一个比较山寨的 ...

  8. seo初学

    对前端而言,做网站采用扁平式结构:控制网页链接数量,不能太少,当然也不能太多:其次采用扁平的目录层次,不能超过3次:三:导航优化,最好是文字,如果是图片的话,alt和title必须添加. 面包屑导航: ...

  9. wdcp/wdlinux 常用工具及命令集

    强制修改Mysql的root密码,在忘记mysql密码时有用 sh /www/Wdlinux/tools/mysql_root_chg.sh ftp配置文件检查,在FTP不能连接或登录时有用sh /w ...

  10. CentOS下安装nginx并且升级nginx到最新版

    yum install yum-fastestmirro yum install nginxyum update nginx(之前先配置一下)vim /etc/yum.repos.d/nginx.re ...