브라우저 동작 원리

일단 브라우저 주소 창에 웹사이트의 주소를 입력하는 것부터 살펴보자.
사이트에 접속을 하려면 해당 사이트의 웹 서버에 연결을 해야 하고,
우리가 입력한 주소의 IP 주소를 알아야 웹 서버에 연결을 할 수 있다.

IP 주소를 알려면?

1. 캐시 확인

브라우저나 OS, 네트워크 라우터 또는 ISP의 DNS 캐시를 먼저 확인하여 IP 주소를 확인한다. (있으면 웹 서버 연결)

2. DNS 탐색 (캐시에 없는 경우 실행)

로컬 DNS와 ISP의 DNS 서버를 순차적으로 확인하며 캐시된 IP 주소가 있는지 한 번 더 확인한다. (있으면 웹 서버 연결)

3. 루트 DNS 서버로 요청

2번의 두 서버에도 캐시가 없는 경우에 루트 DNS 서버로 요청을 전달한다.
루트 DNS에서는 입력된 주소에 따라 TLD 서버에 요청을 보내고,
TLD 서버에서 최종 도메인 네임서버까지 요청을 전달하여 IP 주소를 받아오게 된다.

IP를 주소를 찾았으면?

웹 서버 연결해야지

찾은 IP 주소를 이용해 해당 웹 서버와 연결을 한다.
이 때 HTTP 연결인 경우, TCP 3-way handshake 방식으로 연결하고,
HTTPS 연결인 경우, TLS handshake 절차가 추가되어 보안 연결을 설정 한다.

이렇게 연결이 완료되면 이후로는 바로바로 데이터 요청하고 응답을 받을 수 있다.
😆

---

위와 같이 연결됐으면 사이트를 그려줄 HTML 파일을 달라고 요청을 보내고 응답으로 HTML 파일을 받아와 렌더링을 시작한다.

렌더링 과정

1. HTML 파싱 ➡️ DOM 생성

브라우저가 HTML 파일을 트리 형태의 DOM(Document Object Model)객체로 변환한다.
이 때 HTML의 각 요소들은 DOM에서 하나의 요소 노드라는 형태로서 자리하며,
서로 부모-자식 관계를 가진다.

노드의 종류
- 요소 노드: HTML 태그 자체
- 텍스트 노드: HTML 태그 내부 텍스트
- 속성 노드: HTML 태그의 속성

2. CSS 파싱 ➡️ CSSOM 생성

DOM 요소들의 스타일링 정보를 제공하는 CSS 파일을 파싱하여 CSSOM(CSS Object Model)을 생성한다.

3. DOM + CSSOM = 렌더 트리

각각 HTML 파일과 CSS 파일을 파싱하여 만든 DOM과 CSSOM을 결합하여 렌더 트리를 만든다.
이 렌더 트리는 화면에 표시할 요소들의 구조 및 스타일을 나타낸다.
이 때 “display: none”의 스타일 속성을 가지는 요소는 렌더 트리에서 제외된다.

4. 레이아웃 계산

렌더 트리에 따라 실제 화면에서의 배치되는 위치와 크기를 계산한다.

5. 페인팅

레이아웃 계산이 끝난 후, 실제로 브라우저에 스타일이 적용된 요소들이 그려지는 과정이다.

6. 컴포지팅

GPU에 의해 별도의 레이어로 만들어진 요소가 올바른 위치에 배치되며, 화면에 그려질 준비가 이루어지는 과정이다.

별도의 레이어로 분리되는 요소들
- position: fixed
- position: sticky
- CSS 애니메이션 및 transform, opacity 속성으로 스타일이 변하는 요소들
- 비디오 및 이미지 콘텐츠

GPU가 위와 같은 요소들을 효율적으로 병렬 처리함으로써 그래픽 작업을 빠르게 수행해준다. 그 외 일반적인 요소들은 CPU가 처리해준다.

7. 렌더링

컴포지팅을 통해 생성된 레이어를 바탕으로 최종적으로 화면이 표시된다.
… 아까 페인팅은 뭔데?
그게 렌더링 과정의 일부.
레이아웃에 따라 텍스트, 색상, 배경 등을 적용해서 페인팅을 하고,
레이어 작업이 필요한 것들을 컴포지팅을 통해 처리한 후,
최종 결과가 렌더링 되는 것이다.

---

자바스크립트는 언제 가져와?

HTML 문서 내에 <script> 태그에 의해 자바스크립트 파일이 연결되어 있는데,
이 때 <script> 태그의 작성 방식 및 위치에 따라 자바스크립트 로드 방식이 달라진다.

- <script src=“…”></script>
기본적으로 <script>는 동기적으로 작동하여,
HTML 파싱 중 <script>를 만나면 자바스크립트 파일이 로드되고 실행되기까지 HTML 파싱을 멈춘다.
자바스크립트 파일을 로드하는 중에는 화면 구성이 렌더링되지 않기 때문에 렌더링 속도 및 UX에 영향을 줄 수 있다.

- <script src=“…” async> </script>
async 속성은 자바스크립트 파일을 비동기적으로 로드하며,
HTML 파싱 여부에 관계없이 자바스크립트 파일이 로드되는대로 실행이 된다.

- <script src=“…” defer> </script>
defer 속성도 async와 마찬가지로 자바스크립트 파일을 비동기적으로 로드한다.
async와의 차이점은 HTML 파싱이 끝난 후에 자바스크립트 파일을 실행한다.

자바스크립트가 DOM과 CSSOM을 수정하게 되는 경우,
Reflow 또는 Repaint 과정이 발생할 수 있다.

Reflow: 레이아웃 변경
즉, 요소의 크기, 위치, 테두리, 마진, 패딩 등 스타일 변경

Repaint: 색상, 배경색, 그림자, 불투명도, visibility 등 시각적 효과 변경

두 작업 모두 CPU 자원을 소모하며,
특히 Reflow의 경우, 레이아웃을 다시 계산해야 하므로 더 많은 자원을 소모하게 된다.
그러므로 성능을 위해서는 Reflow, Repaint를 최소화하는 방식으로 DOM 또는 CSSOM을 변경하는 것이 좋다.

---

이제 까먹지말자 브라우저 동작 원리