[FE] Reflow / Repaint

Reflow

DOM 요소의 기하학적 속성이 변경될 때, 브라우저 사이즈가 변할 때, 스타일 시트가 로딩되었을 때 발생하는 변화들을 다시 계산해 주는 작업 => Layout 이라고도 함

 

리플로우가 발생하는 경우 변화된 요소 주변의 다른 요소들도 영향을 받게 되므로 DOM 트리 전체에 대한 계산을 다시 수행

해당 계산 작업 이후에 리페인트 또한 발생하여 화면을 그려준다

=> 상당히 비용이 많이 드는 작업

Repaint

변경된 요소를 실제로 화면에 그려주는 작업

따라서 리플로우가 발생하면 필연적으로 리페인트가 실행 될 수 밖에 없다

리페인트는 리플로우가 발생한 경우에만 발생 되는지...?

요소의 스타일만 변경된 경우 레이아웃에 영향을 주지 않는 요소 개별의 변화는 repaint만 발생

단 visibility : hidden과 display : none은 다르다는 것을 알고 있어야 함

 

visibility는 레이아웃에는 영향을 주지 않고 보이지 않도록 해주는 속성이지만

display는 영역도 없어지게 하기 때문에 리플로우가 발생

Reflow와 Repaint 최적화

리페인트의 경우 visibility를 DOM API를 통해서 조절하는 경우 자식 노드들까지 다 검색하기 때문에 성능 저하가 발생하기도 함

리플로우는 해당 요소의 자식요소와 부모/조상 요소의 레이아웃 계산을 진행하기 때문에 비용이 많이 발생

=> 최적화에 대한 고민을 하지 않을 수 없다...

애니메이션 요소의 위치를 absolute로 두기

애니메이션으로 요소의 위치를 변경할 때마다 주변 요소의 위치도 변경되어 리플로우가 여러 번 발생

해당 현상 방지를 위해 애니메이션이 적용된 요소의 position을 absolute로 설정해두면 주변 요소의 위치가 변경되지 않음

display : none 활용

display : none이 적용된 요소는 렌더트리에서 배제

여러 스타일이 수정되어야 하는 경우 display : none을 먼저 설정한 뒤 스타일을 수정하고 이후에 display : block 으로 렌더트리에 추가하는 방법

 

여러번 발생할 수 있는 리플로우와 리페인트가 각각 리플로우 한번과 리페인트 한번으로 줄어들 수 있음

리플로우 발생 횟수 줄이기

JS로 여러 DOM의 여러 속성을 변경할 때 리플로우 횟수를 줄일 수 있음

const el1 = document.querySelector('.target-first');
el1.style.width = '10px';
const el2 = document.querySelector('.target-second');
el2.style.width = '10px';

const el1 = document.querySelector('.target-first');
const el2 = document.querySelector('.target-second');
el1.style.width = '10px';
el2.style.width = '10px';

스타일을 변경하는 코드를 모아서 리플로우 횟수를 줄이는 방법

for (let i = 0; i< 10; i++) {
  el.style.width = target.offsetWidth + 10; // 반복문이 돌 때 매번 호출
}

const { offsetWidth } = target;  // 한 번 호출해서 변수에 저장
for (let i = 0; i< 10; i++) {
  el.style.width = offsetWidth + 10;
}

변수를 이용해서 리플로우를 발생시키는 함수, 또는 속성을 여러번 호출하는 것을 막는 방법

 

또한 DOM의 여러 스타일을 변경해야 한다면 스타일을 CSS로 정의해 두고 한번에 변경하거나, 애초에 리플로우와 리페인트가 발생하지 않는 opacity 또는 transform  속성을 사용하는 것도 하나의 방법

가상 DOM 사용하기

리액트, 뷰를 사용한다면 Virtual DOM을 사용하는 것도 하나의 방법

가상 DOM은 생성한 DOM을 저장했다가 DOM에 변화가 있는 경우 메모리에 저장했던 DOM과 변경된 DOM을 비교하여 변경된 부분만 실제 DOM에 반영

모든 DOM에 영향을 주지 않고 변경이 필요한 DOM만 바꿔주기 때문에 불필요한 재 랜더링을 막을 수 있음