사용자는 로딩이 빠르고 상호작용이 원활한 컨텐츠로 이루어진 웹 경험을 원한다.

웹 성능에 있어 가장 주요한 문제는 다음과 같다.

지연시간
싱글 스레드

지연시간은 빠른 로딩과 직결되는데 빠르게 요청하는 것과 빠르게 가져오는 것이 중요하다.

네트워크 지연시간은 네트워크를 통해 컴퓨터로 바이트를 전송하는데 걸리는 시간이고 웹 최적화는 페이지 로드가 빠르게 이루어지도록 하는 것이다.

브라우저의 대부분은 싱글 스레드이기 때문에 이것을 이해하고 메인스레드의 책임을 줄여준다면 메인 스레드가 요청된 작업을 모두 수행하고 상호작용에 빠르게 반응하기 위해 가장 중요한 렌더링 시간을 향상 시킬 수 있다.

웹페이지를 표시하기 위해 브라우저가 동작하는 단계는 다음과 같다.

사용자가 https://naver.com 의 url을 입력하면
먼저 브라우저는 DNS(Domain Name System)서버에 조회를 요청해 해당 URL을 저장하고 있는 서버의 IP 주소를 응답받는다.
IP 주소를 알고난 뒤 브라우저와 웹서버가 데이터를 전송하기 전 TCP 연결을 설정하기 위해
3-way handshake 과정을 거친다. 이 과정은 다음과 같다.
클라이언트가 서버에 연결요청을 보낸다. (SYN, Synchronize)
서버가 클라이언트의 요청을 받았음을 알리고, 연결할 준비가 되었다고 응답한다.
(SYN-ACK, Synchronize-Acknowledge)
클라이언트가 서버의 응답을 확인하고 연결이 설정되었음을 알린다. (ACK, Acknowledge)

TCP 연결이 설정되면 브라우저는 HTML, CSS, JavaScript 등의 리소스를 요청하는 HTTPS 요청을 보낸다.
웹 서버는 요청받은 리소스를 TCP 연결을 통해 브라우저에게 전송한다.
브라우저는 전달받은 리소스를 해석해 페이지로 렌더링하기 위해 HTML 마크업은 DOM 으로 변환하고, CSS 마크업은 CSSOM 으로 변환한다.
HTML 마크업을 DOM으로 변환하는 구조는 다음과 같다.
1. HTML을 읽어 지정된 파일인코딩(UTF-8)에 따라 개별 문자로 변환한다.
2. HTML5 표준(, )과 꺾쇠로 묶인 문자열을 고유한 토큰으로 변환한다.
3. 토큰을 객체로 변환한다.
4. 생성된 객체는 트리데이터 구조로 연결된다.
이러한 과정을 거친 최종 출력을 문서객체 모델, DOM 이라고 한다.
브라우저가 DOM을 구성하는 동안 섹션에서 CSS 링크를 발견하면 즉시 이 리소스에 대한 요청을 전달하고 CSSOM 으로 변환한다.
1. DOM과 마찬가지로 문자 → 토큰 → 노드로 변환해 CSSOM 트리구조에 연결한다.
2. 계산된 스타일은 재귀적으로 세분화해 구체적으로 적용하는데 이를 통해 하향식 규칙이 된다.
이후 DOM 트리와 CSSOM 트리는 렌더링 트리로 결합된다.
렌더링 트리에서는 페이지에 표시되는 모든 DOM 콘텐츠와 CSSOM 스타일 정보를 캡처한다.
1. 렌더링에 반영하지 않는 노드(태그)와 CSS를 통해 숨겨진 노드(display: none)는 렌더링 트리에서 누락된다.
2. 각 노드에 대한 CSSOM 규칙을 찾아 적용한다.
3. 콘텐츠를 계산된 스타일에 적용한 노드를 내보낸다.
이를 통해 화면에 표시된 콘텐츠와 스타일 정보를 모두 포함하는 렌더링 트리를 최종적으로 출력한다.
렌더링 트리가 준비되면 리플로우(레이아웃) 단계를 진행한다.

기기 표현 영역내에서 노드의 정확한 크기와 위치는 계산하지 않았기 때문에 브라우저는 렌더링 트리의 루트에서부터 순회하며 페이지에서 각 객체의 정확한 크기와 위치를 파악한다.
표시되는 노드와 계산된 스타일을 알았다면 각 노드를 화면의 실제 픽셀로 변환하는 리페인트(래스터화) 단계를 진행한다.

브라우저에서의 단계를 요약하면 다음과 같다.

HTML 마크업을 파싱해 DOM 트리를 빌드
CSS 마크업을 파싱해 CSSOM 트리를 빌드
DOM, CSSOM 트리를 렌더링 트리로 결합
렌더링 트리에서 리플로우 단계를 통해 각 노드의 크기 및 위치를 계산
페인팅(리페인팅) 단계를 통해 각 노드를 화면에 픽셀로 렌더링

만약 DOM 또는 CSSOM이 수정된 경우 화면에서 다시 렌더링할 픽셀을 알아내기위해 이 프로세스를 반복한다.

주요 렌더링 경로를 최적화 하는 것은 1~5단계를 수행하는데 소요되는 총 시간을 최소화 하는 프로세스이다.

출처

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work

https://web.dev/articles/critical-rendering-path/constructing-the-object-model?hl=ko

https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=ko