브라우저 렌더링
브라우저 렌더링이란?
HTML, CSS, JS로 작성된 웹 페이지의 리소스를 처리한 후, 그 결과를 브라우저에서 시각적으로 출력하는 과정을 의미한다.
렌더링 과정
- 브라우저의 주소창에 입력한 URL을 통해 서버에게 웹 페이지의 리소스를 요청하고 서버로부터 응답을 받는다.
- 렌더링 엔진은 응답 받은 리소스중 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성한다.
- DOM과 CSSOM을 결합하여 렌더 트리를 생성한다.
- 만약 DOM API를 통해 DOM이나 CSSOM이 변경되면, 이를 반영하고 다시 렌더 트리를 생성한다.
- 렌더 트리를 기반으로 레이아웃을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.
파싱
파싱이란 프로그래밍 언어나 마크업 언어와 같은 텍스트 데이터를 해석하고 실행할 수 있는 형태로 가공하는 일련의 과정을 말한다.
HTML 파싱
렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.
HTML 파싱 과정은 아래와 같다.
- HTML 문서를 읽고 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해한다.
- 각 토큰들을 객체로 변환하여 노드들(문서, 요소, 어트리뷰트, 텍스트 등)을 생성한다.
- 생성된 노드들 간의 부자 관계를 반영하여 트리 자료구조, 즉 DOM을 구성한다.
CSS 파싱
렌더링 엔진은 웹 페이지의 스타일 정보를 처리하기 위해 CSS 문서를 파싱하여 CSSOM을 생성한다.
CSS 파싱 과정은 아래와 같다.
- CSS 문서를 읽고 토큰들로 분해한다.
- 각 토큰들을 조합하여 스타일 규칙에 대한 정보(선택자, 속성과 값)를 담은 객체들을 생성한다.
- 생성된 객체들 간의 상속 관계를 고려하여 CSSOM을 구성한다.
DOM
DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API를 제공하는 트리 자료구조다.
CSSOM
CSSOM(CSS Object Model)은 CSS 스타일 규칙들을 표현하며 이를 제어할 수 있는 API를 제공하는 트리 자료구조다.
렌더 트리
렌더 트리는 DOM과 CSSOM이 결합된 렌더링을 위한 트리 자료구조다. 따라서 브라우저 화면에 렌더링되지 않는 노드와 CSS에 의해 표시되지 않는 노드들은 포함되지 않는다.
리플로우와 리페인트
DOM API를 사용하여 DOM이나 CSSOM이 변경되면, 변경된 DOM과 CSSOM은 렌더 트리로 다시 결합되고 변경된 렌더 트리를 기반으로 다시 레이아웃과 페인트 과정을 거쳐 렌더링이 발생한다. 이와 같은 과정에서 리플로우와 리페인트가 일어나게 된다.
리플로우는 노드 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징 등 레이아웃 변경이 발생하여 레이아웃을 다시 계산하는 과정을 의미한다. 리플로우는 성능에 영향을 미칠 수 있는 비용이 높은 작업이므로 최소화해야 한다.
리페인트는 재결합된 렌더 트리를 기반으로 다시 페인트하는 과정을 의미한다. 리페인트가 발생했다고 해서 반드시 리플로우가 발생하는 것은 아니다.