Home > Developer > Web Develop
When dealing with time-consuming requests, we always want to let the user see some of the content first, let the user know that the system is being processed, not unresponsive. In general, we are dealing with this situation, using AJAX, first output HTML to the client, and then use AJAX to load more time-consuming resources. The problem with Ajax is the number of requests added, and the need to write additional JS code, and the request interface of the JS call.
In this case, another way to deal with this is to have the response chunked encoded for transmission. Response block encoding, the ability to transfer some of the unnecessary processing of HTML code to the client, and other time-consuming code to run after the completion of the transfer of additional HTML code.
Chunked encoding (chunked encoding)
Chunked encoding is http1.1 support encoding format (of course, no browser does not support 1.1), chunked encoding with the general response differences such as the following:
Normal response:
http/1.1 OK
Cache-control:private, max-age=60
content-length:75785
content-type:text/html; Charset=utf-8
.. Other response headers
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
Chunked Encoding Response:
http/1.1 OK
Cache-control:private, max-age=60
content-length:75785
content-type:text/html; Charset=utf-8
transfer-encoding:chunked
.. Other response headers
Chunk #1 (This is usually a 16-digit number that marks the size of this block)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" ....
Chunk #2
<div .....
Chunk #3
....</body>
Instance (JSP)
A simple page, divided into the header (header) and content (section), if the content part of the need to read the database, spend 3 seconds time, and then display CSDN logo. The header section shows the Cnblogs logo. The code is as follows:
<body><div id= "Head" style= "border:1px solid #ccc;" > cnblogs logo </div><br/>< div id= "Content" style= "border:1px solid blue;" ><%//Sleep 3 seconds thread.currentthread (). Sleep (n);%>csdn logo<br/> </div></body>
Demo Address: http://213.186.44.204:8080/ChunkTest/nochunk.jsp (poor server, please be gentle)
Open this demo address found a very normal page, after 3 seconds to download the display 2 logo, resources loaded into the waterfall diagram such as the following:
Now change the code to the following, plus flush, and let response output the previous HTML tiles:
<div id= "Head" style= "border:1px solid #ccc;" >
Cnblogs logo </div><%out.flush ();//Flush Response, chunked output%><br/><div id= "content" style= "border:1px solid blue;" ><%//Sleep 3 seconds thread.currentthread (). Sleep (n);%>csdn logo<br/> </div>
Demo Address: http://213.186.44.204:8080/ChunkTest/chunk.jsp
Open this demo address, is not found Cnblogs logo first downloaded display, 3 seconds after the CSDN logo display, resource loading diagram such as the following:
From this figure, Cnblogs logo in the JSP page has not finished running and started to download, this is the effect of the block output.
Monitoring tools:
How to know if we have successfully used chunk Encoding, just use the tool to see if transfer-encoding:chunked is included in the response header, and if so, it is chunked. But to monitor the specifics of the chunking, as far as I know, there is only httpwatch support at the moment to see how many pieces we've divided, but the number seems to show 1 more, for example:
You need to see: High-performance Web development series
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
