zoukankan      html  css  js  c++  java
  • 高性能WEB开发(11)

    高性能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开发系列

  • 相关阅读:
    【面积并】 Atlantis
    【动态前k大 贪心】 Gone Fishing
    【复杂枚举】 library
    【双端队列bfs 网格图建图】拯救大兵瑞恩
    【奇偶传递关系 边带权】 奇偶游戏
    【权值并查集】 supermarket
    CF w4d3 A. Pythagorean Theorem II
    CF w4d2 C. Purification
    CF w4d2 B. Road Construction
    CF w4d2 A. Cakeminator
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/3808356.html
Copyright © 2011-2022 走看看