When processing time-consuming requests, we always hope that users can first see part of the content to let users know that the system is processing, rather than making no response. Generally, ajax is used to output html to the client, and then ajax is used to load time-consuming resources. The trouble with ajax is that it increases the number of requests and requires additional js Code and request interfaces called by js.
In this case, another method is to transmit the response block encoding. Response: multipart encoding. You can first transmit some html code that does not need to be processed to the client, and then transmit other html code after other time-consuming code is executed.
Chunked encoding)
Chunked encoding is only supported by http1.1 (of course no browser currently supports 1.1). The differences between chunked encoding and general responses are as follows:
Normal response:
HTTP/1.1 200 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 200 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 (here it is usually a hexadecimal number, indicating 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 consists of a header and a content part. Assume that the content part needs to be read from the database. It takes 3 seconds to display the csdn logo. The header section displays 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 for 3 seconds Thread. currentThread (). sleep (3000); %> csdn logo <br/> </div> </body>
Demo address: http: // 213.186.44.204: 8080/ChunkTest/nochunk. jsp (poor server, please be gentle)
Open the demo address and find that the page is normal. The two logos will be downloaded and displayed three seconds later. The resource loading waterfall diagram is as follows:
Now, change the code to the following and add flush to make response output the previous html multipart:
<Div id = "head" style = "border: 1px solid # ccc;">
Cnblogs logo </div> <% out. flush (); // flush response, block output %> <br/> <div id = "content" style = "border: 1px solid blue; "> <% // sleep for 3 seconds Thread. currentThread (). sleep (3000); %> csdn logo <br/> </div>
Demo address: http: // 213.186.44.204: 8080/ChunkTest/chunk. jsp
Open this demo address to see if the cnblogs logo is downloaded and displayed three seconds later. The resource loading diagram is as follows:
The figure shows that the cnblogs logo is downloaded before the jsp page is executed. This is the effect of multipart output.
Monitoring tools:
How do we know if chunk encoding is used successfully? You only need to use a tool to check whether the response header contains Transfer-Encoding: chunked. If yes, chunk encoding is used. However, to monitor the details of the chunks, as far as I know, only httpwatch currently supports it. You can check the number of chunks we have divided, but the number seems to display one more chunks, for example:
For more information, 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
