브라우저의 렌더링 과정

웹 브라우저의 렌더링 과정은 HTML, CSS, JavaScript와 같은 웹 페이지의 리소스를 가져와 브라우저 화면에 렌더링하는 과정을 의미한다. 아래는 일반적인 브라우저의 렌더링 과정을 단계별로 설명.

HTML 파싱

브라우저는 서버로부터 받은 HTML 문서를 파싱하여 DOM 트리(DOM Tree)를 생성한다. DOM 트리는 파싱된 HTML 문서를 기반으로 DOM(Document Object Model) 트리를 생성. DOM은 문서의 구조와 관계를 표현하는 트리 구조.

CSS 파싱 및 스타일 계산

브라우저는 CSS 파일을 가져와 파싱하고, 스타일 규칙을 적용하여 각 요소의 스타일을 계산. 이 정보는 스타일 규칙 계산 트리(CSSOM)로 표현된다.

CSSOM(CSS Object Model)이란, 웹페이지의 스타일 정보를 객체 모델로 나타내는 개념으로 DOM과 유사하지만, 문서의 구자가 아닌 문서의 스타일을 표현한다. CSS 규칙과 스타일 속성들을 객체로 표현하여 자바스크립트로 조작이 가능하다. 주로 웹 개발에서 동적으로 스타일을 변경하거나 계산하는 데 사용됨. 여러 브라우저에서는 window.getComputedStyle를 사용하여 현재 적용된 스타일을 가져올 수 있다.

window.getComputedStyle

/* css 예시 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

// 자바스크립트 예시
var element = document.getElementById('myElement');
element.style.width = '200px';
element.style.height = '200px';
element.style.backgroundColor = 'red';

//  getComputedStyle 예시
var element = document.getElementById('myElement');
var styles = window.getComputedStyle(element);
var width = styles.width;
var height = styles.height;
var backgroundColor = styles.backgroundColor;

레이아웃(Reflow) 계산

계산된 스타일을 기반으로 각 요소의 크기와 위치를 계산하여 레이아웃을 생성. CSSOM과 DOM 트리를 이용하여 수행된다.

페인트(Paint) 단계

레이아웃을 기반으로 브라우저는 각 요소의 실제 픽셀을 그린다.

합성(Compositing) 단계

브라우저는 페인트 단계에서 그려진 각각의 요소를 합성하여 최종 화면을 생성한다.

JavaScript 실행

HTML 파싱 중에 script 태그를 만나면, 해당 스크립트를 실행. 스크립트 실행은 DOM 조작, 이벤트 핸들링, AJAX 요청 등 다양한 작업을 수행할 수 있다.

리렌더링 및 리플로우

사용자 인터랙션, JavaScript 실행, 혹은 동적인 스타일 변경이 발생하면, 브라우저는 해당 변경사항에 따라서 다시 렌더링을 수행하게 된다. 이 때, 리플로우(Reflow)라는 용어가 사용되며, 레이아웃 계산이 다시 수행된다. 이러한 단계를 모두 거친 후에 브라우저는 최종적으로 사용자에게 보여지는 웹 페이지를 화면에 렌더링한다. 이 렌더링 과정은 브라우저의 엔진에 따라 다르며, 최신 브라우저는 이러한 과정을 최적화하여 더 빠르고 효율적으로 렌더링한다.

성능 최적화: 불필요한 Reflow와 Repaint를 최소화하고, 효율적인 CSS와 자바스크립트를 작성하여 성능을 최적화해야 한다.