서비스를 만드는 회사는 성능 최적화에 꼭 우선 순위를 두어야 한다
빠른 렌더링을 위해서는 여러가지 다양한 방법들이 있지만
리플로우와 리페인트를 최대한 줄이는 것이 성능 최적화의 종은 방법 중 하나이다
Reflow
생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향받은 모든 노드의 수치를 다시 계산하는 과정
Reflow가 일어나는 상황
- 페이지 초기 렌더링(최초 레이아웃 과정)
- 노드의 추가 혹은 제거
- 요소의 위치 변경 ( left, top...)
- 요소의 크기 변경(margin, padding, border, width, height 등)
- 폰트 변경과 이미지 크기 변경 (text 내용, 크키가 다른 이미지로 변경시)
- 윈도우 리사이징 (viewport 크기 변경시)
Repaint
Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리는 과정
*하지만 레이아웃 수치가 변경이 되어야지만 리드로우가 발생하는 것은 아니다
노드의 background-color, visibility, outline등의 스타일이 변경되었을때는 리플로우 빼고 리드로우만 일어난다
Reflow & Repaint 최적화 방법
-
스타일을 변경할 경우 가장 하위 노드의 클래스를 변경한다
-
인라인 스타일을 지양한다
-
애니메이션이 있는 엘리먼트라면 position 속성을 fixed 혹은 absolute로 지정한다
-> 애니메이션 효과는 계속 변경이 되기 때문에 많은 리플로우를 발생시킨다 해서 fixed 혹은 absolute로 주게되면 에니메이션이 발생하는 해당노드를 전체노드에서 따로 떼서 분리를 시키기때문에 그 해당 노드만 리플로우가 발생 할 수 있도록 제한을 할 수 있다 -
< table>레이아웃을 지양한다
-
CSS 표현식을 지양한다
-> Reflow & Repaint가 일어나는 CSS 속성들 이다.
Reflow가 일어나면 Repaint는 필연적으로 일어나야 하기 때문에 가능하다면 Reflow가 발생하는 속성보다 Repaint 만 발생하는 속성을 사용하는것이 좋다
또한 Reflow Repaint가 일어나지 않는 transform, opacitiy와 같은 속성도 있다.
따라서 left, right, width, height 보다 transform을, visibility/display 보다 opacitiy를 사용하는 것이 성능 개선에 도움이 된다 -
CSS 하위 선택자를 최소화한다
-
사용하지 않는 노드에는 visibilty: invisible 보다 display:none 속성을 활용해 스타일을 변경한다
-> visibility: invisible은 레이아웃 공간을 차지하기 때문에 reflow의 대상이 된다. 하지만 display:none은 레이아웃 공간을 차지하지 않아 렌더트리에서 제외된다 -
캐시를 활용한다
