오늘은 React나 Next같은 기술들을 다뤄보기 이전에, 브라우저에서 어떻게 HTML을 렌더링하는가에 대해서 알아보려고 합니다.
응용된 기술을 사용하는 것도 좋지만 그 이전에 본질을 학습하는 것도 중요하겠죠?

우리가 사이트를 로드하기 위해서 뭘 제일 먼저 할까요? 바로 해당 웹 사이트에 접속하는 것 부터 시작합니다.
간단하게 URL을 주소창에 입력하는 것으로도 시작될 수 있고, 링크를 클릭할 수도 있겠죠! 접근 방법은 다양합니다.

웹 서버로부터 응답을 받기 위해 우선 컴퓨터는 해당 페이지 자원의 위치를 먼저 확인합니다. 이 때 해당 사이트에 방문한 적이 없다면 DNS 조회 를 시작합니다.
해당 페이지 자원의 위치를 IP 주소로 응답받았다면, 해당 페이지의 IP는 일정 기간동안 캐시되어 이후 동일한 사이트를 접속한다면 서버에 요청하지 않고 캐싱된 IP를 검색하여 사용합니다.

IP 주소를 알고난 이후에 브라우저는 서버와 TCP Handshake 를 통해 연결을 설정합니다. 이후 바로 응답을 받을 것 같지만, 요즘에는 보안성을 이유로 Http 대신 Https를 사용하기 때문에,
TLS Negotiation 으로 불리는 핸드셰이크를 통해 통신을 암호화합니다. 해당 과정까지 끝나면 비로소 웹 서버와 연결이 되었다고 말할 수 있고, 브라우저는 비로소 요청을 할 수 있습니다.

웹 서버로 연결이 성립되면, 브라우저는 유저 대신에 HTTP GET Request를 보내 웹 렌더링을 위한 리소스를 요청하게 됩니다.

브라우저가 렌더링을 위한 리소스를 수신했다면, 해당 자료를 파싱하는 과정을 거치게 됩니다. 이 때 생성되는 트리는 크게 두가지, DOM 과 CSSOM 입니다.
위 트리에 대해 간략하게 설명하자면 HTML을 위한 트리가 DOM, CSS를 위한 트리가 CSSOM이라고 할 수 있겠습니다.

해당 DOM 트리를 만들기 위해서 4가지의 과정이 필요합니다.

1. 브라우저가 HTML의 원시 바이트를 읽어와 HTML에 정의된 인코딩에 따라 개별 문자로 변환하는 과정
2. 브라우저가 문자열을 W3C 표준에 지정된 고유 토큰으로 변환하는 과정
3. 방출되는 토큰의 속성 및 규칙을 정의하는 객체로 변환하는 과정
4. HTML 마크업에 정의된 여러 태그 간의 관계를 해석해서 트리 구조로 연결하는 과정

브라우저는 마크업을 처리할 때 위의 단계를 수행하게 됩니다.

DOM과 동일한 과정으로 트리를 생성합니다. HTML과 마찬가지로 CSS도 브라우저가 이해하고 처리할 수 있는 형식으로 변환해야 합니다.

해당 과정을 거치면 CSSOM 트리 구조가 생성됩니다.

DOM 트리와 CSSOM 트리를 결합한 트리를 렌더링 트리라고 합니다. 이 렌더링 트리에는 페이지 렌더링을 위해 필요한 노드만 포함됩니다.

이 단계에서는 뷰포트 내에서 각 요소의 위치와 크기를 정확하게 캡쳐하는 Box 모델이 출력됩니다.
이 때, 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환되게 됩니다.

리플로우는 레이아웃 이후에 있는 페이지의 일부분이나 전체 문서에 대한 크기나 위치에 대한 결정입니다.

즉, 액션 수행이나 그로인한 이벤트로 인해 새로운 HTML 요소의 추가 / 기존 요소의 스타일 변경 등이 일어나게 될 때,
영향을 받게되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하게 하는 것 이라고 할 수 있겠습니다.

마지막으로 이 단계에서는 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환합니다. 이전의 단계인 레이아웃 단계에서 계산된 값을 통해 화면에 요소를 출력합니다.
레이아웃 단계에서 각 노드들의 위치/크기/색상과 같은 스타일이 모두 계산 되었기 때문에, 이 단계에서는 화면에 실제 픽셀로 변환됩니다.

리플로우를 통해 발생한 변경사항을 실제 화면에 다시 그려지게 하기 위해 수행하는 페인팅 단계를 말합니다.

• [MDN] 브라우저는 어떻게 동작하는가
• [개발자의 품격] 브라우저의 렌더링 과정
• [zaman17] 브라우저 렌더링 순서와 원리
• [jeju_daun] 브라우저 렌더링 과정