렌더링이 뭐죠? 브라우저에 내용이 써지는 과정 (feat. DOM,Repain,Reflow)

사용자들은 대부분의 인터넷 요소들을 브라우저라는 창을 통해 보게 됩니다. 브라우저에 무언가 보이는 건 너무나도 자연스럽기 때문에 그 과정에 대해 궁금해하거나 의심하지 않을 것입니다.

 

하지만 모든 프론트엔드 개발자들은 브라우저 작동 원리에 대해 알고 있어야합니다.

그래야 사용자가 불편해하지 않을 홈페이지를 만들 수 있기 때문입니다.

 

지연되는 홈페이지, 느리게 반응하는 홈페이지 등 최적화되지 않은 홈페이지들이 너무 많습니다. 다양한 이유가 있겠지만 DOM을 이해한다면 그런 홈페이지의 문제를 어느정도 이해할 수 있습니다.

 

 

브라우저에 그림이 그려지는 과정

1. HTML소스를 DOM트리로 파싱한다.

일반적으로 html안에 내용들을 이용해 트리를 만듭니다. html이라는 태그안에 head와 body라는 자식태그가 있고 body태그안에 article,div,header,footer,p,a,span 등 여러가지 시멘틱 태그들이 자식태그로 있다면 트리형태로 DOM트리가 생성되게 됩니다.

2. CSS소스를 CSSOM트리로 파싱한다.

stylesheet에 있는 css내용들(스타일 내용)을 이용해 트리형태로 CSSOM트리가 생성되게 됩니다. 

3. DOM트리와 CSSOM트리를 이용해 Render트리를 만든다.

랜더트리에는 DOM트리에 맞춰 정의한 스타일들이 적용되어 Render트리를 생성하게 됩니다.

이때 css에서 정의한 display:none은 Render트리를 만들 때 제외됩니다.

4. 레이아웃 측정

css를 작성할 때 사용된 측정값(vw,vh,% 등)을 px단위로 계산합니다.

5. 페인트

측정된 레이아웃값을 Render트리에 적용해 부모태그부터 브라우저에 그리게됩니다.

 

 

위 과정을 렌더링이라고 합니다.

 

렌더링이 완료된 페이지에서 DOM을 조작하는 일이 벌어지거나 CSSOM을 조작하는 일이 벌어질 수 있습니다.

ex) 마우스를 올리면 상자의 색이 변한다, input태그에 글자를 쓰고 버튼을 누르면 버튼의 글자가 바뀐다 등

 

위와 같은 예시는 대부분 자바스크립트를 통해 발생하게 되는데요. 우리가 흔하게 볼 수 있는

document.getelementbyid()

가 대표적으로 dom에 접근하기 위한 코드입니다.

html의 태그에 접근해서 스타일을 바꿔주거나 태그를 추가해주는 등 직접적으로 화면을 변경하는 작업을 하는 경우가 있습니다.

 

이때 리렌더링이 일어납니다.

Reflow

 - 브라우저 렌더링과정 4번인 레이아웃 측정값이 달라지는 경우 Reflow를 일으킵니다. 화면의 전체적이 구조가 바껴야하기 때문이죠. 상자의 크기가 바껴 옆에있던 글자가 아래로 밀린다던지 등 화면 구조가 바뀌게 되면 Reflow가 발생하게 되면 위에서 설명한 3번과 4번과정이 다시 진행되게 됩니다. 이후 Repaint과정이 일어납니다.

화면이 깜빡이는 현상을 볼 수 있습니다.

 

Repaint

 - 단순히 색만 변경된다면 굳이 화면의 구조를 바꿀 필요가 없습니다. 이런경우 Reflow과정을 거치지 않고 Repaint를 하게 됩니다.

 

Reflow가 일어나면 반드시 Repaint가 일어나지만 Repaint만 일어나는경우 Reflow가 일어나지 않는다고 합니다.