브라우저 렌더링 순서에 따른 성능 개선 방법

https://sorrel012.tistory.com/352에서 브라우저 렌더링 순서에 대해 정리했는데, 그 순서와 성능의 연관성에 대해 더 알아보았다.

렌더링 순서(트리 생성, 레이아웃, 페인트)

성능을 개선하기 위해 특히 신경써야 할 부분은 Reflow(Layout)와 Repaint(Paint)이다.

Layout은 각 노드들의 크기나 위치들을 계산하는 단계로, 크기나 위치가 변경될 때 Reflow가 발생한다.

Reflow가 발생하면 페이지의 레이아웃을 다시 계산해야 하므로 효율성이 떨어진다.

Paint는 Layout(Reflow) 단계에서 계산된 레이아웃에 따라 화면에 보여주는 단계로, 스타일이 변경될 때 Repaint가 발생한다.

Repaint는 레이아웃을 변경하지 않고 변경된 부분만 다시 그리기 때문에 Reflow보다 효율적이다.

결론적으로, 성능 최적화를 위해서는 최대한 Reflow를 피하고 Repaint만 일어나도록 하는 것이 좋다.

---

// Reflow만 일어나도록 하는 방법

주로 특정 CSS 속성들이 Reflow를 발생시킨다.

예를 들어, width, height, margin, padding 등의 속성 변경은 요소의 크기와 위치를 변경시키기 때문에 Reflow를 유발한다.

이를 위해 가능하다면 transform과 opacity 속성을 이용하는 것이 좋다.

~ 사이즈를 변경할 때는 width와 height를 사용하는 것이 아니라 transform: scale()을 사용할 수 있다.
~ 위치를 변경할 때는 top left 등의 속성이 아닌 transform: translate()를 사용할 수 있다.  

transform 속성은 요소의 화면상에 변경되는 것으로 보이게 하지만, 해당 요소의 실제 레이아웃 상의 위치와 크기는 변하지 않는다.
그렇기 때문에 transform을 사용하여 요소를 이동시키거나 크기를 변경하더라도 레이아웃이 다시 계산되지 않는다.

~ 화면에 표시 여부를 변경할 때는 display가 아닌 visibility나 opacity를 사용할 수 있다.

visibility 같은 경우 화면상으로는 보이지 않지만 공간은 차지하기 때문에 변경할 시에 레이아웃을 다시 계산할 일이 적다.(hidden과 visible 모두 공간 차지)
opacity 역시 화면상으로 보여지는 투명도만 조절하기 때문에 레이아웃을 다시 계산할 필요가 없다.
반면 display는 none일 경우 요소를 화면에서 완전히 제거하여 레이아웃에서 공간을 차지하지 않고,  요소를 다시 표시하면, 공간을 차지하기 때문에 레이아웃을 다시 계산해야 한다.