Node.js 학습 튜 토리 얼 의 HTTP/2 서버 푸 시[번역]

머리말
최근 Node.js v 8.4+버 전 발표 로 체험 판 HTTP/2 를 가 져 왔 습 니 다.매개 변수 인 expose-http2 를 설정 하여 시작 할 수 있 습 니 다.
이 글 은 HTTP/2 의 가장 중요 한 부분 인 서버 푸 시 를 소개 하고 작은 Node.js 프로그램 사례 를 만들어 서 사용 할 것 입 니 다.다음은 더 이상 할 말 이 없 으 니 상세 한 소 개 를 해 봅 시다.
HTTP/2 에 대하 여
HTTP/2 의 목적 은 완전한 요청 과 응답 을 지원 함으로써 지연 을 줄 이 고 HTTP 헤더 필드 를 효과적으로 압축 하여 프로 토 콜 비용 을 최소 화 하 는 동시에 요청 우선 순위 와 서버 푸 시 에 대한 지원 을 증가 하 는 것 입 니 다.
HTTP/2 내용 에 대해 서 는 글 을 보십시오HTTP/2
서버 푸 시
HTTP/2 서버 푸 시(Server Push)는 서버 가 브 라 우 저 요청 전에 자원 을 브 라 우 저 로 보 낼 수 있 도록 합 니 다.
HTTP/2 로 넘 어가 기 전에 어떻게 HTTP/1 과 함께 사용 하 는 지 살 펴 보 겠 습 니 다.
HTTP/1 에서 클 라 이언 트 가 서버 에 요청 을 보 내 고 서버 는 많은 외부 자원(.js,.css 등 파일)링크 를 포함 하 는 HTML 파일 을 되 돌려 줍 니 다.브 라 우 저가 이 초기 HTML 파일 을 처리 할 때 이 링크 를 분석 하고 각각 불 러 옵 니 다.
아래 demo 로드 과정의 그림 을 보십시오.시간표 의 독립 요청 과 이 요청 들 의 시작 에 주의 하 십시오:

HTTP/1 자원 로드
이것 은 HTTP/1 의 작업 원리 입 니 다.이것 이 바로 우리 가 이렇게 오랫동안 응용 프로그램 을 어떻게 개발 하 는 지 입 니 다.왜 바 꿔 야 돼 요?
현재 방법의 문 제 는 사용자 가 브 라 우 저 분석 응답 을 기다 리 고 링크 를 발견 하고 자원 을 가 져 와 야 한 다 는 것 이다.렌 더 링 이 지연 되 고 로 딩 시간 이 증가 합 니 다.일부 해결 방안,예 를 들 어 내부 자원 과 연결 되 지만 초기 응답 도 점점 커진다.
HTTP/2 서버 푸 시 기능 이 시선 에 들 어 오 는 곳 입 니 다.서버 가 브 라 우 저가 요청 하기 전에 자원 을 브 라 우 저 로 보 낼 수 있 기 때 문 입 니 다.
아래 사진 을 보면 HTTP/2 를 통 해 같은 서 비 스 를 제공 하 는 사이트 입 니 다.시간 축 과 시동 기 를 봅 니 다.HTTP/2 재 활용 이 요청 수량 을 줄 이 고 자원 은 초기 요청 과 함께 즉시 보 내 는 것 을 볼 수 있 습 니 다.

HTTP/2 서버 푸 시
오늘 Node.js 에서 HTTP/2 서버 푸 시 를 사용 하여 클 라 이언 트 의 로드 시간 을 가속 화 하 는 방법 을 보 여 줍 니 다.
Node.js HTTP/2 서버 푸 시 사례
내 장 된 http2 모듈 을 불 러 오 면 https 모듈 을 사용 하 는 것 처럼 서버 를 만 들 수 있 습 니 다.
재 미 있 는 부분 은 index.html 를 요청 할 때 다른 자원 을 푸 시 하 는 것 입 니 다.

const http2 = require('http2') 
const server = http2.createSecureServer( 
 { cert, key },
 onRequest
)

function push (stream, filePath) { 
 const { file, headers } = getFile(filePath)
 const pushHeaders = { [HTTP2_HEADER_PATH]: filePath }

 stream.pushStream(pushHeaders, (pushStream) => {
 pushStream.respondWithFD(file, headers)
 })
}

function onRequest (req, res) { 
 // Push files with index.html
 if (reqPath === '/index.html') {
 push(res.stream, 'bundle1.js')
 push(res.stream, 'bundle2.js')
 }

 // Serve file
 res.stream.respondWithFD(file.fileDescriptor, file.headers)
}

이렇게 bundle 1.js 와 bundle 2.js 자원 은 요구 하기 전에 브 라 우 저 로 보 내 집 니 다.
너 는 완전한 사례 를 볼 수 있다https://github.com/RisingStack/http2-push-example
HTTP/2 & Node
HTTP/2 는 우리 가 여러 방면 에서 클 라 이언 트 와 서버 간 의 통신 을 최적화 하 는 데 도움 을 줄 수 있다.
서버 푸 시 를 통 해 저 희 는 자원 을 브 라 우 저 에 보 내 사용자 의 초기 로드 시간 을 줄 일 수 있 습 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
원문
번역자:https://blog.risingstack.com/node-js-http-2-push/
저자:Jin