High-performance WEB development. Flush divides the page into chunks and renders it gradually. Flush divides the page into chunks and renders it step by step_javascript skills

Generally, when dealing with this situation, everyone uses ajax, first outputs the html to the client, and then uses ajax to retrieve and load resources that are time-consuming. The trouble with using ajax is that it increases the number of requests, and requires writing additional js code and request interfaces called by js.
For this situation, there is another way to deal with this situation, which is to let the response be encoded in blocks for transmission. The response is encoded in blocks. You can first transmit a part of the HTML code that does not need to be processed to the client, and then transmit the other HTML code after other time-consuming codes have been executed.
Chunked encoding (chunked encoding)
Chunked encoding is an encoding format that is only supported by http1.1 (of course, no browser currently does not support 1.1). The difference between chunked encoding and general response is as follows:

Copy code The code is 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

Copy code The code is as follows:

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 (this is usually a hexadecimal number, marking the size of this chunk)
chunk #2
chunk #3
....

Example (JSP)
A simple page, divided into header (header) and content (part), assuming The content part needs to read the database, which takes 3 seconds, and then displays the csdn logo. The header part displays the cnblogs logo. The code is as follows:

Copy code The code is as follows:

< div id="head" style="border:1px solid #ccc;">
cnblogs logo

<%
// Sleep for 3 seconds
Thread.currentThread().sleep(3000);
%>
csdn logo

Demo address: http://213.186.44.204 :8080/ChunkTest/nochunk.jsp (The server is poor, please be gentle)
Open this demo address and find a normal page. It starts downloading after 3 seconds and displays 2 logos. The resource loading waterfall chart is as follows:

Now change the code to the following, add flush, and let the response output the previous html in chunks:

Copy code The code is as follows:

cnblogs logo

<%
out.flush(); // flush response, chunked Output
%>

<%
// Sleep for 3 seconds
Thread.currentThread().sleep(3000);
%>
csdn logo

Demo address: http://213.186.44.204:8080/ChunkTest/chunk.jsp
When you open this demo address, do you find that the cnblogs logo is downloaded and displayed first, and the csdn logo is displayed after 3 seconds? Resource loading picture As follows:

From this picture, we find that the cnblogs logo starts downloading before the jsp page is executed. This is the effect of block output.


Monitoring tools:

How to know whether we have successfully used chunk encoding? Just use a tool to check whether the response header contains Transfer-Encoding: chunked. If it does, it means it is chunked. But if you want to monitor the detailed information of the chunks, as far as I know, currently only httpwatch supports it. You can check how many chunks we have divided, but the number seems to be displayed by one more, as shown below: