高性能WEB开发之flush让页面分块逐步呈现
创始人
2024-07-27 04:31:35
0

正对这种情况,还有一种处理方法,就是让response分块编码进行传输。response分块编码,可以先传输一部分不需要处理的html代码到客户端,等其他耗时代码执行完毕后再传输另外的html代码。

分块编码(chunked encoding)

chunked encoding 是http1.1 才支持编码格式(当然目前没有哪个浏览器不支持1.1了),chunked encoding 与一般的响应区别如下:

  1. 正常的响应:  
  2.     HTTP/1.1 200 OK  
  3.     Cache-Control: private, max-age=60 
  4.     Content-Length: 75785  
  5.     Content-Type: text/html; charset=utf-8  
  6.     ..其他response headers  
  7.           
  8.    
  1. chunked encoding 响应:  
  2.    HTTP/1.1 200 OK  
  3.    Cache-Control: private, max-age=60 
  4.    Content-Length: 75785  
  5.    Content-Type: text/html; charset=utf-8  
  6.    Transfer-Encoding: chunked  
  7.    ..其他response headers  
  8.       
  9.    chunk #1(这里通常是16进制的数字,标志这个块的大小)  
  10.    
  11.     
  12.    chunk #2  
  13.    
  14.     
  15.    chunk #3  
  16.    .... 

实例(JSP)

一个简单的页面,分为头部(header)和内容(部分),假设内容部分需要读取数据库,花费3秒时间,然后显示csdn的logo。header部分显示cnblogs的logo。代码如下:

  1.  
  2.      
  3.        cnblogs logo      
  4.     
 
  •      
  •      
  •     <%  
  •         // 睡眠3秒  
  •         Thread.currentThread().sleep(3000);  
  •     %> 
  •         csdn logo 
  •              
  •     
  •  
  •  
  • 演示地址:http://213.186.44.204:8080/ChunkTest/nochunk.jsp (服务器比较差,请大家温柔点)

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

    flush让页面分块,逐步呈现

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

    1.  
    2.    cnblogs logo      
     
  • <%  
  •     out.flush(); // flush response,分块输出  
  • %> 
  •  
  •  
  •     <%  
  •         // 睡眠3秒  
  •         Thread.currentThread().sleep(3000);  
  •     %> 
  •     csdn logo 
  •          
  •  

    演示地址:http://213.186.44.204:8080/ChunkTest/chunk.jsp

    打开这个演示地址,是不是发现cnblogs logo先下载显示出来,3秒后csdn logo才显示,资源加载图如下:

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

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

    监控工具:

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

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

    系列专题:高性能WEB开发应用指南

    【编辑推荐】

    1. 高性能WEB开发之疯狂的HTML压缩
    2. 高性能WEB开发之页面呈现、重绘、回流
    3. 高性能WEB开发之JS、CSS的合并压缩
    4. 20个新鲜的Web应用 Web设计师不可错过
    5. 让Web开发者事半功倍的8个网站

    相关内容

    热门资讯

    如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
    如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
    施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
    20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
    Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
    德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
    为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
    《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...