高性能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 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
JS+Canvas绘制动态时钟效果
Nov 10 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
利用javaScript处理常用事件详解
Apr 14 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
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
微信小程序前端源码逻辑和工作流
2016/09/25 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python之mock模块基本使用方法详解
2019/06/27 Python
Python 函数list&amp;read&amp;seek详解
2019/08/28 Python
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
求网格中的黑点分布
2013/11/06 面试题
办公室主任岗位职责
2013/11/08 职场文书
项目资料员岗位职责
2013/12/10 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
难忘的一课教学反思
2014/04/30 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
介绍信的格式
2015/01/30 职场文书
学习焦裕禄观后感
2015/06/09 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
redis中lua脚本使用教程
2021/11/01 Redis