렌더링이란?
개발자가 작성한 문서를 브라우저에 그래픽형태로 출력하는 과정
렌더링 엔진
대부분의 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있음. 다만 브라우저마다 다른 렌더링 엔진을 사용한다. 파이어폭스는 Gecko, 사파리는 Webkit, 크롬은 Webkit을 사용하다가 웹킷을 Fork해 Blink엔진을 자체구현해 사용중. 따라서 프론트엔드 테스트 환경에서 크롬, 파폭 등 각브라우저별로 자동 테스트를 수행해 호환성을 검사해야한다.
렌더링과정
-
DOM생성
서버로부터 받은 HTML,CSS를 다운로드받는다. 그리고 각각의 파일들은 단순한 텍스트이므로 연산과 관리가 유리하도록 Object Model로 만들게됨. 각각 DOM Tree 와 CSSOM으로 만들어진다.
-
Render Tree생성
DOM Tree와 CSSOM Tree가 만들어졌으면 이 둘을 이용해 Render Tree를 생성한다. Render Tree에는 DOM Tree와 달리 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성된다. display:none속성이 설정된 노드는 이과정에서 제외됨. (visibility: invisible은 요소가 보이지 않지만 공간은 차지하기에 Render Tree에 포함.)
-
Layout
Render Tree노드들이 가지고 있는 스타일과 속성에 따라 브라우저의 뷰포트 화면내에서 어느크기로 출력될지 계산하는 단계.
-
Paint
Layout계산이 완료되면 요소들을 실제 화면에 그리기 시작. 이전단계에서 이미 요소들의 위치와 크기, 스타일 계산이 완료된 Render Tree를 이용해 실제 픽셀 값을 채워넣게 된다. 이때 처리해야하는 스타일이 복잡할 수록 소요시간이 증가함. background-color의 경우 속도가 빠르지만 그라데이션, 그림자 효과 등은 비교적 더 오래걸림.
렌더링 최적화 - Reflow, Repaint줄이기
Reflow (Layout)
어떠한 액션이나 이벤트로인해 요소의 크기나 위치등의 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드, 부모 노드들을 포함해 Layout과정을 다시 수행하게 된다. 이때 Render Tree와 각 요소들의 크기, 위치를 다시계산하는 과정을 Reflow라고 함.
ex)
- 페이지 초기 렌더링 ( 최초 Layout 과정 )
- 윈도우 리사이징 시 (viewport 크기 변경시)
- 노드 추가 or 제거
- 요소의 위치, 크기변경 (lefrt, top, margin, padding, border, width, height 등)
- 폰트 변경과 이미지 크기 변경시
Repaint (Paint)
Reflow만 수행되면 실제 화면에 반영되지 않는다. Paint단계가 다시 수행되야 하는데 이를 Repaint라고 함.
무조건 Reflow가 일어나야 Repaint가일어나는 것은 아니다. background-color, visibility같이 레이아웃에 영향을 주지 않는 스타일 속성이 변경되었을 때 Reflow를 수행할 필요가 없기에 Repaint만 수행하게 됨.
Reflow, Repaint줄이기
1. 사용하지 않는 노드에는 visibility: invisible보다 display: none을 사용.
2. Reflow, Repaint가 발생하는 속성 사용 피하기
- Reflow가 일어나는 대표속성
position,width,height,margin,padding,border,border-width,clear,display,float,font-family,font-size,line-height,min-height,overflow,text-align,vertical-align,white-space - Repaint가 일어나는 대표속성
background,background-image,background-position,background-repeat,border-radius,border-style,box-shadow,color,line-style,outline,outline-color,text-decoration,visibility
position:absolute,fixed를 사용해 영향을 주는 노드 줄이기- 프레임 줄이기
React의 Vitual DOM, Angular Change Detector는 왜 필요할까?
일반적으로 DOM에 접근해 여러번의 속성변화 및 스타일 변화를 수행하면 그에따라 여러번의 Reflow, Repaint의 과정이 발생한다. 하지만 Virtual DOM은 이러한 변화가 일어나 Reflow, Repaint가 필요한 것들을 한번에 묶어서 DOM에 전달하게 된다. 따라서 처리되는 Reflow, Repaint의 규모가 커질 수 있지만 한번만 연산을 수행하게 된다. 이를통해 반복적으로 연산이 일어나는 부분이 줄어들어 성능이 개선됨.
