HTTP 렌더링 이란?

DASOM KIM·2022년 1월 6일

이 글을 시작하기 앞서 다양한 블로그 및 홈페이지에서 긁어서 정리한 글 입니다.

HTTP 렌더링이란?

HTTP 정의
렌더링 정의
웹 브라우저 렌더링 과정

HTTP(Hyper Text Transfer Protocol) 정의

HTTP는 웹(WWW)상에서 정보를 주고 받을 수 있는 프로토콜입니다. HTML문서와 같은 리소스들을 가져와 주고 받는데에 쓰입니다. 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 프로토콜 입니다.

예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지(HTML)이나 그림 정보를 요청(Request)하면, 서버는 이 요청에 응답(Response)하여 필요한 정보를 해당 사용자에게 전달하게 됩니다. 이 정보가 모니터와 같은 출력 장치를 통하여 사용자에게 나타납니다.

HTTP를 통해 전달되는 자료는 http: 로 시작하는 URL(인터넷 주소)로 조회 할 수 있다.

프로토콜이란?

컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계입니다.
이렇게 규칙을 정해두었기 때문에, 모든 프로그램이 규칙에 맞춰 개발하고 서로 정보를 교환 할 수 있게 됩니다.

HTTP프로토콜 이란?

통신 프로토콜

웹에서 브라우저와 서버 간에 데이터를 주고 받기 위한 방식으로 HTTP프로토콜을 사용하고 있습니다.
통신 프로토콜을 쉽게 이야기를 해보면 ‘나는 이렇게 줄 테니, 너는 이렇게 받고 난 너가 준거 그렇게 받을께’ 라고 생각하면 됩니다.

HTTP 프로토콜의 특징

HTTP 프로토콜은 상태가 없는(stateless)프로토콜 입니다.
‘상태가 없다’라는 말은 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 된다는 의미입니다. 즉, 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없다. 서버는 세션과 같은 별도의 추가 정보를 관리하지 않아도 되고, 다수의 요청 처리 및 서버의 부하를 줄일 수 있는 성능 상의 이점이 생깁니다. HTTP프로토콜은 일반적으로 TCP/IP통신 위에서 동작하며 기본 포트는 80번이다.

HTTP Request & HTTP Response

HTTP 프로토콜로 데이터를 주고받기 위해서는 클라이언트인 브라우저가 요청을 보내고 서버가 응답 해준다.

URL(Uniform Resource Locators)
서버에 자원을 요청하기 위해 입력하는 영문 주소이다.
Protocol, Host, Port, Resource Path, Query로 이루어져 있다.

HTTP요청 메소드 (Http Request Methods)

URL을 이용하여 서버에 특정 데이터를 요청 할 수 있다.

GET : 요청
POST : 생성
PUT : 변경
DELETE : 삭제

HTTP 상태 코드 (Http Status Code)

서버에서 설정해주는 응답 정보이다.
URL요청을 보내고 나면 서버에서 응답으로 오는 상태가 크게 2가지로 나뉘는데, 200(성공) 과 404(실패) 이다. 따라서 이 HTTP 상태 코드로 추가적인 로직을 구현 할 수 있다.

자세한 상태코드 정리 -> 프런트엔드 개발자가 알아야하는 HTTP 프로토콜 Part 1

렌더링 정의

렌더링이란 HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말합니다. 즉, 화면에 표시할 웹 페이지를 만드는 과정을 뜻합니다.

웹 브라우저 렌더링

실시간으로 웹사이트가 그려지는 과정, 이 과정을 웹 브라우저의 렌더링 과정이라고 말합니다.

모든 웹 브라우저는 렌더링 엔진과 자바스크립트 엔진을 갖고 있다.
렌더링 엔진은 HTML, CSS 문서와 같은 웹 사이트의 소스 코드를 읽어, 실제 요소들이 어떤 크기, 너비로 배치되는지, 텍스트는 얼마나 커야 하는지, 색상은 어때야 하는지, 간격은 얼마나 되어야 하는지 등을 계산해 실시간으로 그려준다. 크롬(Chrome)이나, 엣지(Edge) 브라우저는 크롬의 블링크(Blink) 렌더링 엔진을 사용한다.
자바스크립트 엔진은 자바스크립트 코드를 읽어내 기능을 작동시키는 역할을 한다.

렌더링 과정

👉🏽 Request/Response → Loading → Scripting → Rendering → Layout → Printing

Loader가 서버로부터 HTML을 불러온다.
HTML을 구조별로 분류(Parsing)하여 DOM트리를 생성한다.
- 트리란? 분석에 따른 구조
CSS파일과, 스타일 요소를 분류하여 CSSOM트리를 만든다.
DOM트리 와 CSSOM을 결합하여 렌더트리를 만든다.
렌더트리의 요소들의 크기와 위치를 계산한다.
계산된 크기와 위치에 맞게 화면에 출력한다.

사용자가 브라우저를 통해 웹 사이트에 접속하면, 브라우저는 서버로부터 HTML파일을 요청해서, 서버에게 HTML파일을 응답을 받고, 렌더링 엔진은 HTML 문서를 파싱해서DOM(DOCUMENT OBJECT MODEL)을 만들고, CSS파일과 함께 포함된 스타일 요소를 파싱해서 CSSOM(CSS OBJECT MODEL)을 만듭니다. DOM방식을 거쳐 CSSOM으로 표현 된 후 RENDER TREE(최종적으로 브라우저에 표기될)가 생성됩니다. 각 요소들이 가지고 있는 스타일에 따라 브라우저 화면의 크기와 위치를 계산하여(Layout작업, Paint, Composite과정) 계산이 완료가 되면 각 요소들을 크기와 위치에 맞게 브라우저에 출력됩니다.

Layout : 요소가 차지할 공간과 화면의 위치 계산이 포함됩니다. 부모 요소는 자식 요소에 영향을 미칠 수 있으며 때로는 그 반대의 경우도 마찬가지입니다.
Painting : 렌더 트리의 각 노드를 화면의 실제 픽셀로 변환시킵니다. DOM을 변경하는 Javascript가 로드되어 여러 번의 페인팅이 발생할 수 있습니다.
Compositing : 모든 레이어를 화면에 표시하게되는 최종 이미지로 병합하는 작업입니다. 합성을 마치면 일부 레이어는 여러 레이어로 그릴 수 있으므로 올바른 순서로 화면에 그려야 합니다.

렌더트리의 동작순서

DOM 트리 상의 루트부터 시작해서 각 노드를 순회합니다.
보이지 않는 노드를 생략합니다.
표시되는 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용합니다.
계산된 스타일과 함께 보이는 노드를 내보냅니다.
마지막으로 화면에 계산된 스타일을 포함하는 렌더트리를 출력합니다.

CSSOM은 렌더 트리에 큰 영향을 미칠 수는 있지만, DOM 트리에는 영향을 주지 않습니다.

렌더링

SSR: Server-Side Rendering (서버 측 렌더링) - 클라이언트 측 또는 유니버설 앱을 서버의 HTML로 렌더링합니다.
CSR: Client-Side Rendering (클라이언트 측 렌더링) - 브라우저에서 애플리케이션을 렌더링합니다. 일반적으로 DOM을 사용합니다.
Rehydration: 클라이언트가 서버에서 렌더링 한 HTML의 DOM 트리와 데이터를 재사용하도록 자바 스크립트 뷰를 "부팅"합니다.
Prerendering: 빌드 타임에 클라이언트 측 애플리케이션을 실행하여 초기 상태를 정적 HTML로 캡처합니다.

성능

TTFB: Time to First Byte (첫 번째 바이트까지의 시간) - 링크를 클릭한 후 처음으로 들어오는 콘텐츠 비트 사이의 시간을 나타냅니다.
FP: First Paint - 픽셀이 처음으로 사용자에게 표시되는 시점.
FCP: First Contentful Paint - 요청 콘텐츠(기사 본문 등)가 표시되는 시점
TTI: Time To Interactive - 페이지가 상호작용 가능하게 될 때까지의 시간 (이벤트 발생 등)