웹 브라우저가 웹페이지를 그리는 과정

 

◽ 렌더링이란

렌더링이란 HTML, CSS, JavaScript 등을 브라우저에서 출력하는 과정이다.

 

◽ 렌더린 엔진의 종류

렌더링 엔진은 브라우저마다 다르다.

크롬은 블링크(Blink)를 사파리는 웹킷(Webkit)을 파이어폭스는 게코엔진(Gecko)을 사용한다.

 

◽ 렌더링 과정

1. HTML과 CSS를 Object Model로 만든다. 여기서 HTML을 파싱하여 DOM(Document Object Model)으로 만들며, 파싱 중 CSS파일을 만나면 CSSOM(CSS Object Model)을 만든다.

2. DOM + CSSOM을 사용하여 Renter Tree를 구성한다.

3. Render Tree를 사용하여 각 노드들의 정확한 위치와 크기를 계산하여 레이아웃을 구성한다.

4. 계산이 완료되면 요소들을 화면에 그린다. 이 단계를 페인팅, 래스터화라고 말하기도 한다.

5. composite 단계: 각 레이어를 합성하는 단계이다.

 

 

 

출처 및 참고

브라우저의 렌더링 과정

[web]브라우저가 웹페이지를 그리는 법

 

브라우저의 렌더링 과정

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.