`
Fangrn
  • 浏览: 814273 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • j2ee
阅读更多

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

  

 

 

  现在把代码改成如下,加上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开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现

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

    Uploading and Downloading Files in Web Dynpro Java

    2. **性能优化**:对于大型文件的上传,应考虑使用分块上传或异步上传机制,以提高用户体验。 3. **兼容性问题**:考虑到不同浏览器可能存在的差异,确保文件上传和下载功能在主流浏览器上都能正常工作。 4. **国际...

    JSP从入门到精通.pdf

    - JSP本质上是一种简化版的Servlet,它让开发者可以更方便地编写动态Web页面。 - 在后台,JSP会被编译成Servlet类执行。 #### 第2章 JSP语法 - **2.1 JSP页面的基本结构** - JSP页面通常包含HTML、XML标记以及...

    Gzip

    ob_end_flush(); ``` 在这个例子中,`ob_gzhandler` 函数被用作输出缓冲区处理器,自动对页面内容进行 Gzip 压缩。 **其他相关文件** - `说明.htm` 可能包含了关于 Gzip 使用方法或功能的详细说明。 - `代码中国....

    Jsp中的文件下载 自己写的 有详解

    在Java Web开发中,JSP(JavaServer Pages)是一种用于创建动态网页的技术。当你需要在JSP中实现文件下载功能时,通常会涉及到服务器端处理、流的读写以及HTTP响应头的设置。本教程将深入讲解如何在JSP中实现文件...

    用C#语言从服务器下载文件

    在IT领域,特别是Web开发中,使用C#从服务器下载文件是一个常见的需求。根据给定的文件信息,我们可以深入探讨这一主题,理解其中的关键技术点和实现细节。...这对于构建高性能、安全的Web应用至关重要。

    Java实现简单文件下载共3页.pdf.zip

    在Java编程语言中,实现一个简单的文件下载功能是常见的需求,尤其在开发Web应用程序时。这个"Java实现简单文件下载共3页.pdf.zip"的压缩文件可能包含了一份详细指南,教你如何利用Java来完成这个任务。尽管我们无法...

    文件的上传下载 java

    在Java编程中,文件的上传下载是Web应用中常见的功能,尤其在开发涉及用户交互的系统时,如文件分享、在线文档编辑等场景。这里我们将深入探讨如何在Java环境中实现文件的上传和下载。 首先,我们来理解文件上传的...

    文件下载,二进制流转换成文件 解决中文名乱码的问题

    在IT领域,尤其是在Web开发中,处理文件下载和解决中文文件名乱码问题是常见的需求之一。本文将深入探讨如何通过二进制流转换为文件来实现文件下载,并着重讲解如何解决中文文件名出现的乱码问题。 ### 文件下载...

    关于java的上传下载

    在实际项目中,你可能还需要考虑安全性问题,如防止文件路径遍历攻击、确保上传的文件类型安全、处理大文件上传的分块以及优化性能等。同时,使用Spring MVC等高级框架可以让你的代码更加简洁和易于维护。 总结来说...

    jsp中对文件的下载。。。

    3. **性能优化**:大文件下载时,考虑使用缓冲和分块传输,减少内存消耗。 4. **错误处理**:捕获并处理可能出现的异常,如文件不存在、无权限等。 5. **资源释放**:务必关闭打开的流,避免资源泄漏。 总结来说,...

    ASP.NET实现EXCEL数据导入进度条ajax

    7. **优化性能**:对于大数据量的Excel文件,考虑使用内存效率更高的库(如EPPlus)替代`Microsoft.Office.Interop.Excel`,以减少内存占用和提高导入速度。 总之,通过ASP.NET和Ajax的结合,我们可以创建一个实时...

    jsp之下载文件

    在JavaServer Pages (JSP) 中,下载文件是一项常见的任务,尤其在Web应用程序中,它可能涉及用户请求获取服务器上存储的资源。本教程将详细解释如何使用JSP中的流传输技术来实现文件下载功能。 首先,理解流传输是...

    asp.net基于http的长连接项目

    ASP.NET 是微软开发的一种用于构建Web应用程序的框架,它提供了丰富的功能和高效的性能。在ASP.NET中实现基于HTTP的长连接,通常涉及到一种名为“Comet”或“Reverse AJAX”的技术。这种技术允许服务器向客户端推送...

    C#下载文件(TransmitFile/WriteFile/流方式)实例介绍

    分块下载则可以提高大型文件的下载性能,尤其在网络条件不稳定或带宽有限的情况下。 在实际应用中,选择哪种方法取决于项目需求和性能考虑。对于小文件,`TransmitFile`可能是一个不错的选择,因为它更高效;对于大...

    python文件

    它被广泛应用于Web开发、数据分析、人工智能、自动化脚本等多个领域。在"python文件"这个主题下,我们将深入探讨Python文件操作的相关知识。 1. **Python文件操作基础** Python提供了丰富的内建函数来处理文件,如...

    BlobStorage:使用 azure 的文件存储 (blob) 服务的 JSF 应用程序

    同时,为了优化性能,可以使用块Blob和分块上传功能,特别是处理大文件时。 标签"JavaScript"可能是指在前端与后端JSF应用程序交互时,可以使用JavaScript库如Azure Storage JavaScript Client Library,以便在用户...

Global site tag (gtag.js) - Google Analytics