브라우저 렌더링

렌더링

렌더링이란 브라우저가 웹 문서를 화면에 그리는 과정을 말한다. 클라이언트가 URI를 통해 서버로부터 HTML을 비롯한 리소스를 다운로드 받으면 브라우저는 웹 문서를 화면에 그리기 위해 렌더링을 수행한다. 브라우저마다 렌더링을 수행하는 렌더링 엔진과 자바스크립트 코드를 실행하는 자바스크립트 엔진이 존재한다. 

렌더링 과정

1. DOM 트리, CSSOM 트리 생성

클라이언트가 리소스를 다운로드 받으면 브라우저는 렌더링을 위해 먼저 HTML 코드로부터 DOM 트리, CSS로부터 CSSOM 트리를 생성한다. 

 

• DOM 트리 생성

DOM 트리 생성 과정

•  CSSOM 트리 생성

CSSOM 트리 생성 과정

CSSOM 트리

 

2. 렌더링 트리 생성

DOM 트리와 CSSOM 트리를 만든 후, 이 둘을 결합해서 렌더링 트리를 생성한다. 렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다. (메타 태그, 스크립트 태그, display 속성이 none인 태그 등 제외)

렌더링 트리 생성 과정

 

3. 레이아웃 단계

렌더 트리가 생성된 후, 기기의 뷰포트 내 렌더 트리의 노드의 정확한 위치와 크기를 계산한다. 이 과정을 레이아웃이라고 한다. 상대 측정값은 뷰포트 내 절대 픽셀로 변환된다.

box model

 

4. 페인팅 단계

레이아웃 단계에서 뷰포트 내 각 노드의 정확한 위치와 크기가 계산되면 화면에 각 요소들을 실제 픽셀로 변환해 요소들을 그리게 된다. 이 단계를 페인팅 단계라 한다.

리플로우(Reflow), 리페인트(Repaint)

렌더링을 통해 화면에 모든 요소가 그려지고 나면 사용자는 다양한 액션을 수행하게 되고, 여기서 여러 이벤트가 발생해 새로운 HTML 요소가 생성되거나, 기존 요소의 스타일이 변경될 수 있다. 이런 변경을 통해 영향을 받게 되는 모든 노드에 대해서 렌더링 트리 생성과 레이아웃 과정을 다시 수행하게 된다. 이러한 과정을 리플로우라고 한다.

 

리플로우는 단지 변경사항을 반영하기 위해 렌더링 트리를 생성하고 레이아웃 과정을 다시 수행하는 것이고, 실제 이 결과를 화면에 그려내기 위해서는 페인팅 단계를 다시 수행해야 한다. 이 과정을 리페인트라고 한다.

 

기존 요소에 변경 사항이 생겼다고 항상 리플로우-리페인트가 일어나는 것은 아니고, 레이아웃에 영향이 미치지 않는 단순한 색상 변경 같은 변경사항은 리플로우 수행 없이 바로 리페인트만 수행하게 된다. (리플로우가 일어나면 반드시 리페인트도 일어난다.)

 

참고)

https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce