고성능 WEB 개발 Flush는 페이지를 덩어리로 나누어 단계별로 렌더링합니다.

일반적으로 이러한 상황에 대처할 때 모두가 ajax를 사용하고 먼저 html을 클라이언트에 출력한 다음 ajax를 사용하여 시간이 많이 걸리는 리소스를 검색하고 로드합니다. ajax를 사용할 때의 문제점은 요청 수가 증가하고 js에서 호출되는 추가 js 코드 및 요청 인터페이스를 작성해야 한다는 것입니다.
이 상황을 처리하는 또 다른 방법은 응답을 블록으로 인코딩하여 전송하는 것입니다. 응답은 블록으로 인코딩됩니다. 먼저 처리할 필요가 없는 HTML 코드의 일부를 클라이언트에 전송한 다음, 시간이 많이 걸리는 다른 코드가 실행된 후에 다른 HTML 코드를 전송할 수 있습니다.
청크 인코딩(Chunked Encoding)
청크 인코딩은 http1.1에서만 지원하는 인코딩 형식입니다(물론 현재 1.1을 지원하지 않는 브라우저는 없습니다). 청크 인코딩과 일반 응답의 차이점은 다음과 같습니다. :

코드 복사 코드는 다음과 같습니다.

정상 응답:
HTTP/ 1.1 200 OK
캐시 제어: private, max-age=60
Content-Length: 75785
Content-Type: text/html; charset=utf-8
..기타 응답 헤더

코드 복사 코드는 다음과 같습니다.

청크 인코딩 응답:
HTTP/1.1 200 OK
Cache-Control: private, max-age=60
Content -길이: 75785
Content-Type: text/html; charset=utf-8
Transfer-Encoding: 청크
..기타 응답 헤더
청크 #1(일반적으로 16진수입니다. 이 청크의 크기 표시)
청크 #2
청크 #3
....

예(JSP)
헤더(header)로 구분된 간단한 페이지 및 콘텐츠(부분), 콘텐츠 부분은 데이터베이스를 읽어야 하며 3초가 소요되고 csdn 로고가 표시된다고 가정합니다. 헤더 부분에는 cnblogs 로고가 표시됩니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

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

<%
// 3초 동안 절전 모드
Thread.currentThread().sleep(3000)
%>
csdn 로고
"http://files.jb51.net/upload/201006/20100619130753558.gif" />

데모 주소: http://213.186.44.204 :8080/ChunkTest/nochunk.jsp (서버 상태가 좋지 않습니다. 양해 바랍니다.)
이 데모 주소를 열고 일반 페이지를 찾으면 3초 후에 다운로드가 시작되고 2개의 로고가 표시됩니다. 리소스 로딩 폭포 차트는 다음과 같습니다.

이제 코드를 다음과 같이 변경하고 플러시를 추가한 후 응답이 이전 HTML을 청크로 출력하도록 합니다.

코드 복사 코드는 다음과 같습니다.

cnblogs 로고

out.flush(); // 플러시 응답, 청크 출력

<%
// 3초 동안 절전 모드
Thread.currentThread().sleep(3000)
%>csdn 로고
< ;img src="http://files.jb51.net/upload/201006/20100619130753558.gif" />

데모 주소: http://213.186.44.204:8080/ChunkTest/chunk.jsp
이 데모 주소를 열면 cnblogs 로고가 먼저 다운로드되어 표시되고 csdn 로고가 표시되는 것을 확인하실 수 있습니다. 3초 후? 리소스 로딩 그림은 다음과 같습니다.

이 그림을 보면 jsp 페이지가 실행되기 전에 cnblogs 로고가 다운로드되기 시작하는 것을 볼 수 있습니다. 이는 블록 출력의 효과입니다.


모니터링 도구:

청크 인코딩이 성공적으로 사용되었는지 확인하는 방법은 무엇입니까? 도구를 사용하여 응답 헤더에 Transfer-Encoding: Chunked가 포함되어 있는지 확인하면 됩니다. 그런데 청크의 자세한 정보를 모니터링하고 싶다면 현재는 httpwatch에서만 지원하는 것으로 알고 있는데, 몇 개의 청크를 분할했는지 확인할 수 있는데 아래와 같이 숫자가 한 개 더 표시되는 것 같습니다.