web页面分块加载

原文链接http://www.cnblogs.com/BearsTaR/archive/2010/05/19/flush_chunk_encoding.html

一般大家在处理这种情况,都使用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="http://files.jb51.net/upload/201006/20100619130753913.gif" /> 
</div> 
<br /> 
<div id="content" style="border:1px solid blue;"> 
<% 
// 睡眠3秒 
Thread.currentThread().sleep(3000); 
%> 
csdn logo<br /> 
<img src="http://files.jb51.net/upload/201006/20100619130753558.gif" /> 
</div> 
</body>

演示地址:http://213.186.44.204:8080/ChunkTest/nochunk.jsp (服务器比较差,请大家温柔点) 
打开这个演示地址发现很正常的页面,在3秒后才开始下载显示2个logo,资源加载瀑布图如下: 

现在把代码改成如下,加上flush,让response把之前的html分块输出: 
<div id="head" style="border:1px solid #ccc;">

复制代码代码如下:

cnblogs logo <img src="http://files.jb51.net/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="http://files.jb51.net/upload/201006/20100619130753558.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个,如下图:

时间: 2024-10-08 07:16:29

web页面分块加载的相关文章

web页面动态加载UserControl,并调用用户控件中的方法来初始化控件

1,HTML页 头部注册: <%@ Register Src="~/WorkLog/WorkLogNewV1/UserControl/CeShiBu.ascx" TagPrefix="UserControl" TagName="CeShiBu"%> <%@ Register Src="~/WorkLog/WorkLogNewV1/UserControl/KaiFaBu.ascx" TagPrefix=&quo

web页面的加载顺序

1.页面顺序 一个典型的web页面由于三个部分组成:html.css和JS.执行的顺序是: 整个执行过程安装html的顺序来执行. html->head->title->style->加载样式->解析样式->link->加载外部样式表->解析外部样式->script->加载外部脚本->解析外部脚本->执行外部脚本->body->div->body->div->加载脚本->解析脚本->执行脚本-

前端技术-HTML页面的加载

HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输.http基于TCP建立的连接来收发数据,即实际应用上来的. 一个HTML页面的加载的交互流程大致如下: 0.输入URL1.解析URL2.构造并发送HTTP请求服务器的永久重定向响应(从 http://example.com 到 http://www.exam

HTML页面的加载

HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输.http基于TCP建立的连接来收发数据,即实际应用上来的. 一个HTML页面的加载的交互流程大致如下: 0.输入URL1.解析URL2.构造并发送HTTP请求服务器的永久重定向响应(从 http://example.com 到 http://www.example.com)浏览

记录下页面懒加载代码

今天京东在做图书品类的活动,买了几本心仪的书,闲暇之余看了看京东图书促销页前端代码,有很多的工具类js文件,如用于cookie.跨域.数组.业务方面等.突然看到了页面懒加载代码,做下记录. /** * 图片懒加载 */ (function(){ if(jQuery.fn.lazyLoad) return; jQuery.fn.lazyLoad = function(config){ //相关参数 var conf = jQuery.extend({ defClass:"J_imgLazyload

关于asp.net中页面事件加载的先后顺序

一.ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件不会从内容页发送到母版页.同样,也不能在内容页中处理来自母版页控件的事件. 在某些情况下,内容页和母版页中会引发相同的事件.例如,两者都引发 Init 和 Load 事件.引发事件的一般规则是初始化事件从最里面的控件向最外面的控件引发,所有其他事件则从最外面的控件向最里面的控件引发. 请记住,母版页

yii2 如何在页面底部加载css和js

作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 正所谓命由己造,相由心生,那么我们的问题又是怎么抛出来的喃? 这个问题也算是个比较久远但是经常会有人要问到的问题.究其原因, 一来实际开发中不可避免,二来也就是刚接触yii的小伙伴喜欢揪着不放.那 为啥了解过这个问题的人就不纠结了喃?外星人:楼主你si不si撒,人家都

web.xml 组件加载顺序

<web-app> <display-name></display-name>WEB应用的名字 <description></description> WEB应用的描述 <context-param></context-param> context-param元素声明应用范围内的初始化参数 <!– 指定spring配置文件位置 –> <context-param> <param-name>

tomcat web.xml启动加载类

tomcat web.xml启动加载类 2010-03-30 22:31suitieming | 分类:JAVA相关 | 浏览3870次 我写了一个程序配在tomcat上 想启动tomcat的时候自动运行这个类 怎么配置XML文件类名Test 分享到: 2010-03-31 01:57提问者采纳 答题闯关,过关即送礼!快来参加~ 把你需要启动时自动运行的类做成一个Servlet,然后在web.xml做如下配置:  <servlet>   <servlet-name>StartupL