"웹 브라우저에서 www.google.com을 치고 엔터를 치게 된다면 어떠한 일이 발생할까?"라는 주제를 가지고 공부하게 되었다!
[10분 테코톡] 🥁 지그의 Virtual DOM
브라우저 렌더링
참고하며 많이 공부를 하게 되었다!
브라우저 렌더링 과정(Browser Rendering)
1) HTML에서 DOM으로 변환
먼저 브라우저에 렌더링 엔진이 html코드를 읽고 파싱하여 DOM트리를 생성한다.
2) DOM 트리 + CSSOM 트리 => Render tree
CSS 파일이나 HTML에 인라인으로 작성된 스타일 코드를 파싱하여 CSS DOM을 구성한다. 이렇게 만들어진 DOM tree와 CSS DOM을 결합하여 렌더트리가 만들어진다.
render tree는 시각적인 구조를 나타낸다.
3) Layout(Reflow)
Layout 단계로 넘어가 뷰포트 내에서 생성된 render tree의 각 노드들이 스크린 상의 어느 공간에 위치해야할지가 결정된다.
position이나 size 등이 여기서 계산된다.
4) Paint(repaint)
실제로 화면에 그리는 repaint 과정을 통해서 브라우저 화면에 우리가 보는 UI가 나타나게 된다.
즉, 브라우저 렌더링 과정을 축약해서 다시 말하자면
- 1) HTML 파일을 파싱하여 DOM Tree를 생성한다.
- 2) CSS 파일을 파싱하여 CSSOM Tree를 생성한다.
- 3) DOM Tree와 CSSOM Tree로 render tree를 생성한다.
- 4) render tree를 바탕으로 Layout 즉, 화면 상의 배치를 결정한다.
- 5) 화면에 실제 그려지는 repaint 과정이 실행되어 UI가 나타난다.
렌더링 최적화
렌더링 과정을 모두 마친 후 최종적으로 브라우저에 페이지가 그려진다고 해서 렌더링 과정이 모두 끝난 것은 아니다. 특정 액션이나 이벤트에 따라 HTML요소의 크기나 위치 등의 레이아웃 수치를 수정하면 그에 영향을 받는 자식노드나 부모노드들이 포함되어 Layout(Reflow)과정을 다시 수행하게 된다.
이렇게 되면 Render tree와 각 요소들의 크기와 위치를 다시 계산하게 되는 이 과정을 Reflow, Reflow된 render tree를 다시 화면에 그려주는 과정을 Repaint라고 한다.
Reflow
위에서 말한 것처럼 렌더 트리와 각 요소들의 크기와 위치를 다시 계산해주는 과정을 Reflow라고 한다.
Reflow가 일어나는 대표적인 경우는 다음과 같다.
- 페이지 초기 렌더링 시 (최초 Layout 과정)
- 브라우저 리사이징 시(viewport 크기 변경)
- 노드 추가 또는 제거
- 요소의 위치, 크기 변경
- 폰트 변경과 이미지 크기 변경
Repaint
Reflow만 수행되면 실제 화면에는 반영되지 않기 때문에 다시 Painting이 일어나야 한다. 이 과정을 Repaint라고 한다.
무조건 Reflow가 발생해야 Repaint가 수행되는 것은 아니다.
background-color, opacity와 같이 레이아웃에는 영향을 주지 않는 스타일 속성이 변경되었을 때는 Reflow를 수행할 필요가 없기 때문에 Repaint만 수행하게 된다.
렌더링 최적화 방법
그러면 브라우저에서 렌더링을 최적화 할 수 있는 방법에 대해 알아보자!
1) Reflow 최소화하기
브라우저가 더 렌더링을 빠르고 효율적으로 할 수 있게 개발하기 위해서는 Reflow과정을 최소화 시키는 것이 좋다. Reflow가 발생하면 필연적으로 Repaint가 일어나기 때문에 렌더링 최적화에 좋지 않은 영향을 준다. 그러므로 Reflow가 발생하는 속성보다 Repaint만 발생하는 속성을 사용하는 것이 좋다.
Reflow가 일어나는 대표적인 속성
position,width,height,left,top,right,bottom,margin,padding,border,border-width,float...
Repaint가 일어나는 대표적인 속성
background,background-image,background-position,background-repeat,background-size...
2) 영향을 주는 노드 최소화하기
JavaScript와 CSS를 조합해 애니메이션이나 레이아웃 변화가 많은 요소의 경우 position을 absolute 또는 fixed를 사용하면 영향을 받는 주변 노드들을 줄일 수 있다.
fixed와 같이 영향을 받는 노드가 전혀 없는 경우 Reflow과정이 전혀 필요없어지기 때문에 Repaint연산비용만 들게 되어 효율적이다.
3) 프레임 줄이기
단순하게 생각하면 0.1초마다 1px씩 이동하는 요소보다 0.3초마다 3px씩 이동하는 요소가 Reflow 연산비용이 3배가 줄어든다고 볼 수 있다. 따라서 부드러운 효과를 조금 줄이면서 성능 개선을 할 수 있다.
