📌 Axios 라이브러리를 공부하다가 이 책에서도 정보를 얻을 것이 있을까 하여 목차를 펼쳤다. 38장 브라우저의 렌더링 과정부터 읽다가 HTTP 2.0이 이미 나왔다는 사실을 알게 되어 정리하기 위해 블로그를 켰다.

📍 이웅모, <모던 자바스크립트 Deep Dive> (위키북스, 2020, 5쇄 2022) 38장 브라우저의 렌더링 과정(pp.660~676)의 내용 중 일부입니다만, 브라우저 렌더링 과정은 정리하지 않았습니다. HTTP 2.0 관련 정보만 정리했습니다.

✨ 정리와 별개로, 브라우저 렌더링 과정을 구체적으로 자세히 설명하고 있어 이해하기 좋았습니다. 여러 자료를 보며 DOM, CSSOM, 렌더 트리 등을 이해하는 데 혼란이 있으셨다면 한 번 읽어보세요 추천합니다!

HTTP

• Tim Berners-Lee가 HTML, URL과 함께 고안, 1991년 최초로 문서화 (HTTP/0.9라 불림)

• HTTP/1.0: 1996년 발표

• HTTP/1.1: 1999년 발표

• HTTP/2: 2015년 발표 (NEW!)

자세한 설명을 참고하라고 한 구글 문서에서 몇 문단 인용하겠다.

HTTP/2's primary changes from HTTP/1.1 focus on improved performance. -> 제일 큰 변화는 성능 개선이다!

Unfortunately, implementation simplicity also came at a cost of application performance. -> 기존의 HTTP는 심플함을 지켰으나 그 대가로 성능에 아쉬움이 있었다.

HTTP/2 enables a more efficient use of network resources and a reduced perception of latency by introducing header field compression and allowing multiple concurrent exchanges on the same connection… Specifically, it allows interleaving of request and response messages on the same connection and uses an efficient coding for HTTP header fields. It also allows prioritization of requests, letting more important requests complete more quickly, further improving performance. -> 요청의 우선순위를 정할 수 있어 헤더를 압축하게 되었다(?), 한 번의 커넥션에서 여러 번의 요청/응답 가능하게 되었다, 정도의 말 같다.

The new binary framing layer in HTTP/2 resolves the head-of-line blocking problem found in HTTP/1.x and eliminates the need for multiple connections to enable parallel processing and delivery of requests and responses. As a result, this makes our applications faster, simpler, and cheaper to deploy.

✔️ binary framing layer가 HTTP/2에서 중요한 개념이라고 하는데, 잘 이해하지 못함. 어쨌든 이것을 도입함으로써 성능 개선이 가능했다고.

책에 나와있는 설명으로는, 한 번에 하나의 요청/응답만이 가능했던 HTTP/1.1과 달리, HTTP/2에서는 여러 리소스를 동시에 요청하고 응답할 수 있다고.

지난 게시글(HTTP(2))에서 HTTP/1.1부터 요청/응답 한 번 이루어지고 나면 바로 TCP 커넥션이 끊어지던 것을 개선했다고 했었는데,

그 개선이 있었음에도 불구하고 요청하고 응답 받고 나서 다시 요청을 했어야 했나봄.

(TCP 커넥션이 다시 되도록 기다리는 시간만을 없애줬던 것 같음.)

HTTP/2에서는 TCP 커넥션이 지속되는 것 + 응답이 올 때까지 기다리지 않고 요청을 또 보낼 수 있도록, 그리고 응답도 여러 개 전송할 수 있도록 개선한 것 같다!

이런 개선은 요청/응답에 소요되는 시간을 줄여주므로, 페이지 로드 속도 빨라짐 :)

✔️ HTML 문서 내에 포함돼있는 리소스 요청 ex. link 태그에 의한 CSS 파일 요청, img 태그에 의한 이미지 파일 요청, script 태그에 의한 자바스크립트 파일 요청 등