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


Posted in Javascript onJune 19, 2010

一般大家在处理这种情况,都使用ajax,先把html输出到客户端,然后再用ajax取加载比较耗时的资源。用ajax麻烦的地方是增加了请求数,而且需要写额外的js代码、和js调用的请求接口。
正对这种情况,还有一种处理方法,就是让response分块编码进行传输。response分块编码,可以先传输一部分不需要处理的html代码到客户端,等其他耗时代码执行完毕后再传输另外的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="/upload/201006/20100619130753913.gif" /> 
</div> 
<br /> 
<div id="content" style="border:1px solid blue;"> 
<% 
// 睡眠3秒 
Thread.currentThread().sleep(3000); 
%> 
csdn logo<br /> 
<img src="/upload/201006/20100619130753558.gif" /> 
</div> 
</body>

演示地址:http://213.186.44.204:8080/ChunkTest/nochunk.jsp (服务器比较差,请大家温柔点)
打开这个演示地址发现很正常的页面,在3秒后才开始下载显示2个logo,资源加载瀑布图如下:
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
现在把代码改成如下,加上flush,让response把之前的html分块输出:
<div id="head" style="border:1px solid #ccc;">
cnblogs logo <img src="/upload/201006/20100619130753913.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="/upload/201006/20100619130753558.gif" /> 
</div>

演示地址:http://213.186.44.204:8080/ChunkTest/chunk.jsp
打开这个演示地址,是不是发现cnblogs logo先下载显示出来,3秒后csdn logo才显示,资源加载图如下:
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
从这个图发现,cnblogs的logo在jsp页面还没执行完就开始下载了,这就是分块输出的效果。

监控工具:

      如何知道我们是否成功使用了chunk encoding了 ,只要用工具查看response header 中是否包含了Transfer-Encoding: chunked,如果包含了,则是分块了。但要想监控分块的详细信息,据我所知,目前只有httpwatch支持,可以查看我们到底分了多少块,但是数量好像都多显示了1个,如下图:

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

Javascript 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
小白谈谈对JS原型链的理解
May 03 Javascript
前端微信支付js代码
Jul 25 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
WEB高性能开发之疯狂的HTML压缩
Jun 19 #Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 #Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
Jun 19 #Javascript
ExtJs grid行 右键菜单的两种方法
Jun 19 #Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 #Javascript
javascript,jquery闭包概念分析
Jun 19 #Javascript
基于jquery的滚动新闻列表
Jun 19 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
php输出图像的方法实例分析
2017/02/16 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHPExcel 修改已存在Excel的方法
2018/05/03 PHP
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
python实现汉诺塔方法汇总
2016/07/25 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
开学典礼感言
2014/02/16 职场文书
幼儿园的门卫岗位职责
2014/04/10 职场文书
爱国演讲稿500字
2014/05/04 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
基层工作经验证明样本
2014/11/16 职场文书
关于颐和园的导游词
2015/01/30 职场文书
匿名检举信范文
2015/03/02 职场文书
护士求职简历自我评价
2015/03/10 职场文书
2016年社会管理综治宣传月活动总结
2016/03/16 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android