브라우저 렌더링 과정
✏️브라우저가 렌더링되는 과정을 알아보자.
브라우저는 어떻게 동작할까?
주소창에 주소를 치면 주소에 따른 웹사이트가 표시된다.
관심갖고 보지 않았던 부분이라 그 동안은 그냥 어떻게 잘 되나보다~ 라고 생각했는데,
요즘 그 과정이 궁금해져서 한번 정보를 검색해보았다.
우선 사용자가 주소를 입력하면, 해당 URI를 가진 서버에 자원을 요청하고, 받아온 자원 (HTML,CSS등)
을 해석하여 윈도우에 렌더링해주게된다.
HTML 문서를 받아서 Document Object Model, DOM Tree를 만들고,
CSS는 CSS Object Model로 만들어진다.
그렇게 만들어진 두 개의 Object Model은 결합되어 Render Tree를 생성한다.
Render Tree의 노드들이 화면에 어디에 위치할지 계산된다. (Layout 과정)
Layout 과정을 거치고 픽셀이 그려진 후 브라우져에 그려진다.
1. HTML 및 CSS를 다운로드 받고, Document Object Model, Css Object Model 을 각각 만든다.
DOM은 노드트리(줄기에서 여러 나뭇가지로 나가는)로 표현된다.
<!doctype html>
<html lang="en">
<head>
<title>page</title>
</head>
<body>
<h1> Hello! </h1>
<p> intro... </p>
</body>
</html>
!doctype이 나와서 짚고 넘어가자면, 문서의 유형을 정의하기 위해 사용하는 선언문이다.
html 태그보다 먼저 선언해야 하고, 웹 브라우저에서 사용할 문서가 HTML이며 어떤 버전으로 사용했으니
선언한 방식대로 해석하라는 뜻을 가지게 된다.
DOM은 HTML 문서로부터 생성되지만, DOM !== HTML이 된다.
HTML은 규칙에 따라 정해진 태그 및 속성으로 이루어진 텍스트이고,
DOM은 문서를 객체로 표현한 것으로, DOM에서의 문서 전체는 document가 된다.
DOM API를 통해, 웹페이지를 조작할 수 있게 됐다.
CSSOM도 마찬가지로, 트리구조로 빌드된다.
2. DOM + CSSOM = Render Tree
DOM 및 CSSOM 트리가 결합되어 Render Tree를 생성한다.
Render Tree 같은 경우 페이지를 렌더링하는데 필요한 노드만 포함이 된다.
예를 들어, display: none 및 visibility: hidden 두 속성을 보자면
display: none 속성은 공간에서 아예 사라지기 때문에 Render Tree에 포함되지 않고,
Visibility: hidden 같은 경우 보이지 않지만, 공간은 차지하고 있기 때문에 Render Tree에 포함된다.
3. Layout
Render Tree까지는 화면에 보여줄 노드와, 해당 노드의 속성들을 계산했다면 레이아웃에서는 뷰포트(화면이 표시되는 브라우저의 영역, 모바일 및 PC, 브라우저 창의 크기에 따라 다름) 내에서
해당 노드들의 정확한 위치와 크기를 계산하는 작업을 진행하게 된다.
4. Paint
레이아웃 계산이 완료되면 실제 화면에 그려주는 과정이 진행된다.
추가적으로, Reflow와 Repaint에 대해 알아보자
기본적으로 paint 과정을 다 마치고 화면을 그려주었는데, 특정 동작으로 인해 레이아웃에 변화를 주게 되면
다시 렌더 트리를 구성해야 한다. 이 과정을 Reflow라고 한다.
Reflow가 발생하는 경우가 어떤 경우일지 생각해보면, 무언가 큰 작업을 예로 들 수 있을 것 같다.
갑자기 새로운 엘리먼트가 추가된다거나, 혹은 지워진다던가, 위치가 크게 바뀐다던가 등등 여러 상황이
있을 것 같다.
Repaint는 화면에 변화가 있을 때 화면을 그리는 과정인데, 만약 위의 Reflow가 발생한다면 당연히
화면을 다시 그려야 하기 때문에 Repaint 또한 발생이 된다.
하지만, 위에 언급한 큰 작업들이 아닌 작은 것들이 변경된다면 Reflow가 발생되지 않고 Repaint만 발생한다.
opacity, color, background-color 등의 스타일 변경 시에는 Repaint만 동작하게 된다.
결국 성능을 최적화하려면 Reflow를 줄여야 한다.