렌더링 엔진은 html 파일 구조를 해석해 DOM 트리를 만들고, CSS stylesheet를 해석해 CSSOM 트리를 만든다. 이렇게 만들어진 DOM트리와 CSSOM 트리를 결합해 렌더 트리가 형성되고 렌더트리가 생성되면 레이아웃 단계를 진행한다. 이때 리플로우가 발생한다.
1. 리플로우
생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정을 말한다. 레이아웃 계산을 다시하는 것이라고 생각하면 쉽다.
1-1) 리플로우가 일어나는 상황
- 페이지 초기 렌더링 (최초 레이아웃과정)
- 노드의 추가 혹은 제거
- 요소의 위치 변경
- 요소의 크기 변경(margin, padding, border, width, height등)
- 폰트 변경과 이미지 크기 변경
- 윈도우 리사이징
1-2) 리플로우 최적화 방법
- 스타일을 변경할 경우 가장 하위 노드의 클래스를 변경한다.
- 인라인 스타일을 지양한다.
- html이 파싱되는 시점에서 레이아웃에 영향을 미치기 때문에 추가적인 리플로우를 발생시킨다.
- 효율적인 파싱을 위해 관심사 분리가 중요하다.
- 애니메이션이 있는 엘리먼트라면 position 속성을 fixed 혹은 absolute로 지정한다.
- 애니메이션 효과는 계속 변경되기 때문에 많은 리플로우 발생시킴, 이 때 position 속성을 fixed나 absolute로 주게 되면 애니메이션이 발생하는 해당 노드를 전체 노드에서 분리하기 때문에 애니메이션에 해당하는 노드만 리플로우 발생하도록 제한할 수 있다.
<table>레이아웃을 지양한다.- 테이블 태그는 모두 로드가 되고나서 테이블 너비를 계산해 화면에 그린다.
- 때문에 조금의 변경만 있어도 모든 테이블의 너비가 다시 계산 되어야 하기에 리플로우 비용이 많이 발생
- CSS 표현식을 지양한다.
- 리플로우 발생할 때마다 자바스크립트 표현식**이 다시 계산되기 때문이다.
- CSS 하위 선택자를 최소화한다.
- 렌더링 트리 계산을 줄일 수 있는 방법이다.
display:none속성을 활용해 스타일을 변경한다.- 해당 속성을 가지면 렌더트리가 그려질 때 제외되기 때문이다.
- 캐시를 활용한다.
- 캐시를 활용해서 레이아웃 변경을 큐에 저장해두었다가 한번에 실행해서 리플로우 최소화 시킬 수 있다.
2. 리페인트 (리드로우)
재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것으로, 레이아웃 수치가 변경되어야지만 리페인트가 발생하는 것은 아니다. 노드의 background-color, visibility, outline등 레이아웃에 영향이 없는 변경은 리플로우 없이 리페인트만 일어난다. csstriggers사이트에서 레이아웃에 영향을 주는, 주지 않는 속성에 대해 확인할 수 있다.
서비스를 만드는 회사는 성능 최적화에 꼭 우선 순위를 두어야 한다.
빠른 렌더링을 위해서는 여러가지 다양한 방법들이 있지만 리플로우와 리페인트를 최대한 줄이는 것이 성능 최적화의 좋은 방법 중 하나
리플로우 리페인트를 왜 알아야할까?
서비스를 만드는 회사는 소비자의 사용자 경험 측면에서 성능 최적화에 우선 순위를 두어야하기 때문이다. 빠른 렌더링을 위해 여러 방법이 있지만 리플로우와 리페인트를 최대한 줄이는 것이 성능 최적화의 좋은 방법 중 하나이기 때문에 이를 이해하고 렌더링 최적화를 위해 활용할 줄 아는 것이 중요하다고 생각했다.
++
- css transform 속성을 사용하여 애니메이션 만들기
-> cpu대신 gpu를 사용하여 화면 렌더링을 처리하기 때문
(gpu는 여러개의 코어가 간단한 작업을 동시에 협업하는데 특화되어 있기 때문에 에니메이션을 빠르게 처리할 수 있음) - requestAnimationFrame 함수 사용
-> 자바스크립트를 통해 일어나는 에니메이션 정보를 브라우저에 매 프레임마다 미리 알려줌, 자바스크립트 애니메이션이 프레임의 시작시 실행되도록 보장
