高性能WEB开发(11) - flush让页面分块,逐步呈现-阿里云开发者社区

开发者社区> 技术小甜> 正文

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

简介:
+关注继续查看

  在处理比较耗时的请求的时候,我们总希望先让用户先看到部分内容,让用户知道系统正在进行处理,而不是无响应。一般大家在处理这种情况,都使用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。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 (服务器比较差,请大家温柔点)

  打开这个演示地址发现很正常的页面,在3秒后才开始下载显示2个logo,资源加载瀑布图如下: 

  2010051909492421.jpg

 

 

  现在把代码改成如下,加上flush,让response把之前的html分块输出:

  <div id="head" style="border:1px solid #ccc;">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
   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才显示,资源加载图如下:

   2010051909522021.jpg

   从这个图发现,cnblogs的logo在jsp页面还没执行完就开始下载了,这就是分块输出的效果。

 

监控工具:

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

     2010051909532325.jpg

 

    有需要请查看:高性能WEB开发系列















本文转自BearRui(AK-47)博客园博客,原文链接: http://www.cnblogs.com/BearsTaR/archive/2010/05/19/flush_chunk_encoding.html   ,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
EasyUI+JavaWeb奖助学金管理系统[13]-机构分页浏览功能实现
本文目录 1. 本章任务 2. 新建页面 3. 添加数据表格 4. 封装分页查询方法 5. 测试
13 0
三种web性能压力测试工具http_load webbench ab小结
题记:压力和性能测试工具很多,下文讨论的是我觉得比较容易上手,用的比较多的三种http_load下载地址:http://www.acme.com/software/http_load/http_load-12mar2006.tar.gz程序非常小,解压后也不到100K 居家旅行 携带方便 呵呵http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载。
842 0
Web Vitals :Google 如何定义性能指标及帮助开发者调优前端性能 ?
来自 Google 的Palances Liao 将在第十五届 D2 前端技术论坛带来 《以全球 Web 角度谈前端性能的更新与趋势》主题演讲,与大家分享关于 Core Web Vitals 的最新指标及每个指标的更新。
1283 0
解决数据库至页面的乱码问题(全)
web project中,有很多地方都会设置字符集,最好统一,不然出错的时候就不好找了,都以utf8为例,这是我最喜欢的字符集,让我们看看都哪些地方设置了字符集。     首先,mysql服务端,在安装后的配置阶段,最好就把字符集设置为utf8,它默认的是latin1,经常乱码。
1028 0
+关注
10146
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载