브라우저의 렌더링 과정

브라우저의 핵심 기능은 필요한 리소스를 서버에 요청하고 응답받아 브라우저에 시각적으로 렌더링 하는 것입니다.
주소창에 url을 입력 후 엔터키를 누르면 url의 도메인이 DNS를 통해 IP 주소로 변경되며 이 IP 주소를 갖는 서버에게 요청을 전송합니다.

만약 https://leesangwondev.vercel.app 을 입력했다면 https://leesangwondev.vercel.app/index.html과 같습니다.

index.html 파일만 응답받았는데 CSS, JS, 이미지, 폰트 등과 같은 파일을 다운로드 할 수 있는건 <img>, <style>, <script> 태그를 만나 해당 파일을 요청하기 때문입니다. 렌더링 엔진은 서버로부터 응답받은 HTML을 처음부터 한 줄씩 직렬적으로 파싱하게 됩니다. HTML을 파싱 중 <link> 태그나 <style> 태그를 만나면 DOM 트리 생성을 중단 후 CSS 파싱을 시작해 CSSOM 트리를 생성하는 식으로 진행됩니다.

브라우저의 렌더링 과정은 다음과 같습니다.

브라우저는 HTML, CSS, Javascript, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받는다.
브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM 트리를 결합하여 렌더 트리를 생성한다. (렌더 트리는 렌더링을 위한 자료구조입니다. display:none이 적용된 노드들은 포함되지 않습니다.)
브라우저의 자바스크립트 엔진은 서버로부터 응답된 Javascript를 파싱한다. 이때 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.
렌더 트리를 기반으로 레이아웃을 계산하고 페인팅한다.

Reflow와 Repaint

자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM이나 CSSOM이 변경됩니다. 변경된 DOM, CSSOM은 다시 렌더 트리로 결합되어 레이아웃과 페인트 과정을 거쳐 리렌더링됩니다. 이 작업을 리플로우(reflow), 리페인트(repaint) 라고 합니다. 리플로우는 레이아웃을 다시 계산하는 것을 의미하며 노드의 추가, 삭제, 위치변경, 윈도우 리사이징에 한하여 실행됩니다. 리페인트는 재결합된 렌더 트리를 다시 페인트 하는 것을 의미합니다. 레이아웃의 변경사항이 없다면 리페인트만 실행될 수 있습니다.

참조

모던 자바스크립트 Deep Dive