> 웹 프론트엔드 > JS 튜토리얼 > 고성능 WEB 개발 Flush는 페이지를 덩어리로 나누어 단계별로 렌더링합니다.

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

WBOY
풀어 주다: 2016-05-16 18:24:55
원래의
1378명이 탐색했습니다.

일반적으로 이러한 상황에 대처할 때 모두가 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개의 로고가 표시됩니다. 리소스 로딩 폭포 차트는 다음과 같습니다.

고성능 WEB 개발 Flush는 페이지를 덩어리로 나누어 단계별로 렌더링합니다.이제 코드를 다음과 같이 변경하고 플러시를 추가한 후 응답이 이전 HTML을 청크로 출력하도록 합니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿