DOM, CSSOM 생성
서버로 부터 HTML,CSS를 다운받아 렌더링 엔진에 의해 HTML,CSS 문서를 파싱하고 노드로 변환하여 각 노드 별로 트리구조인 Object Model를 만든다.
HTML은 DOM(Document Object Model)을 CSS는 CSSOM(CSS Object Model)으로 만들어진다.
여기서 렌더링엔진은 브라우저 별로 차이가 있지만, 브라우저는 더 나은 사용자 경험을 위해서 HTML을 파싱할때 까지 기다리지 않고 Layout, Paint과정을 시작하여 미리 사용자에게 보여줄 수 있는 일부 내용들을 출력한다.
Render Tree 생성
DOM과 CSSOM이 만들어 지면 둘을 결합해 Render Tree 를 생성한다.
렌더링 트리는 페이지를 렌더링 하는데 필요한 노드들만 포함된다. 예를들어
- visibility: invisible은 공간은 차지하지만 실제 보여지지 않기 때문에 Render Tree에 포함되지만
- display: none은 화면에 어떠한 공간도 차지하지 않기 때문에 Render Tree에 포함되지 않는다.
Layout
뷰포트 내에 각 노드들의 정확한 위치와 크기를 계산한다.
즉 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느 위치에 어느 크기로 출력될지 계산하는 단계이다.
&, vh, vw와 같이 상대적인 위치 크기 속성은 viewport가 달라질때 마다 크기와 위치가 바뀌게 때문에 매번 다시 계산해야한다.
Paint
Layout단계에서 계산이 완려된 Render Tree를 이용해 실제 Pixel값을 채워넣는다.
즉 색,텍스트,이미지,효과등이 모두 처리되어 화면에 보여지게 된다.
처리해야할 스타일이 복잡할 수록 Paint단계에서 소요되는 시간이 많을 수 있기 때문에 고려해서 만들어야한다. 예를들면 background-color의 경우 단순한 색이지만, 그라데이션이나 배경효과등은 복잡한 계산이 필요하기 때문에 Paint시간이 비교적 오래걸리게 된다.
Reflow
만약 이벤트나 행동에 따라 디자인이 바뀐다면 그의 영향을 받는 자식노드나 부모노드들을 포함하여 Layout과정을 다시 수행하게 된다. 이렇게 된다면 Render Tree가 다시 만들어지게 되는데 이를 ReFlow라고 한다.
Repaint
Reflow 과정을 지나서 Render Tree가 다시 만들어지게 되면 다시 실제 Pixel값을 채워 넣는 과정이 필요한데 이를 Repaint라고 한다.
Reflow, Repaint 줄이기
Reflow, Repaint를 줄인다면 성능과 사용자 경험에서 좋을수가 있다.
개선하는 방법은 4가지다.
사용하지 않는 노드에는 visibility: invisible 보다 display: node을 사용하기
visibility inivisible은 Render Tree에 포함되기 때문에 reflow의 대상이 된다. 하지만 display none은 Render Tree 포함되지 않아 Reflow 대상이 되지 않는다.
Reflow, Repaint가 발생하는 속성 사용 피하기
Reflow가 일어나면 Repaint과정이 일어나기 때문에 가능한 Reflow가 발생하는 속성보다 Repaint만 발생하는 속성을 사용하는것이 좋다.
Reflow가 일어나는 대표적인 속성
position, width, height, margin, padding, border, border-width, font-size, font-weight, line-height, text-align, overflow
Repaint가 일어나는 대표적인 속성
background, color, text-decoration, border-style, border-radius
추가로 애니메이션을 이용할때 left, right, width, heigt보다 transform, translate를 visibility / display보다 opacity를 사용하는 것이 성능 개선에 도움이 된다.
transform, translate, opacity는 GPU단에서 처리할 수 있는 속성이다.
애네이메이션을 이용한다면 transform, translate, opacity를 사용하여 성능개선이 가능하다.
영향을 주는 노드 줄이기
position을 absolute 또는 fixed를 사용하여 영향을 받는 주변 노드들을 줄일 수 있다. fixed와 같이 영향을 받는 노드가 전혀 없는 경우 Reflow 과정이 전혀 필요 없기 때문에 Repaint 연산비용만 들게 됩니다.
또 다른 방법은 애니메이션 시작시 요소를 absolute, fixed로 변경 후 애니메이션이 종료되었을 때 원상복구 하는 방법도 Reflow, Repaint 연산을 줄이는대 도움이 된다.
프레임 줄이기
애니메이션을 사용할때 1px 이동하는 것보다 3px씩 이동하는 요소가 Reflow, Repaint 연산비용이 3배가 줄든다. 따라서 부드러운 효과를 조금 줄여 성능을 개선할 수 있다.
