Reflow, Repaint 그리고 Reflow, Repaint생략에 대해

Reflow, Repaint 그리고 Reflow, Repaint생략을 이해하기에 앞서 선행되어야 하는 개념이 있다.

critical rendering path에 대한 개념이다. 이는 이전에 내용을 다뤘기에 생략하도록 한다.

(https://sangwonny.tistory.com/7?category=948510)

 

critical rendering path 

= > DOM + CSSOM => Render Tree => Layout => Paint => Composite

 

Reflow

CSSOM, render tree, layout, paint 과정을 다시 그려줌

 

강제로 Reflow가 발생하는 현상들의 원인

1. 화면 리사이징 : 브라우 창의 크기를 조정하거나 모바일 기기의 화면 회전과 같이 뷰포트 크기가 변경되는 경우 reflow 발생

2. 요소의 크기나 위치 변경 : 동적으로 reflow에 해당되는 css 속성을 변경하거나 요소를 동적으로 추가 제거하는 경우에 발생.

3. 폰트,  이미지 크기 변경

 

reflow를 최소화하기

1. 애니메이션이 들어간 노드는 position: absolute 또는 fixed 활용.

absolute 스타일을 줌에 따라 부모의 요소의 레이아웃에 영향을 주지 않고 요소를 자유롭게 배치할 수 있다. 이와 같이 다른 요소들에 영향을 주지 않기 때문에 다른 요소의 reflow를 방지를 할 수 있어 더 성능에 있어 좋다.

 

2. 인라인 스타일 최대한 배제 : HTML 파싱하다 inline style을 사용한 태그를 만달때마다 CSSOM 재생성

(인라인 스타일 단점 : 캐싱 불가능

- 인라인 스타일은 html에 포함되어 있기 때문에 스타일 시트의 캐시가 되지 않는다. 외부 스타일 시트는 브라우저에 의해 캐싱되어 동일한 페이지를 다시 방문했을 때 재사용.

- 재사용 어려움

- 스타일 중복 가능성 높아짐

- 유지보수 어려움)

 

3. cssText 및 클래스를 활용해 reflow or repaint 최소화

style을 여러번 호출하여 여러번 적용하기 보다는 cssText 또는 클래스를 통해 한번에 적용되도록 하는 것이 성능에 더 좋다.

  const element = document.getElementById('container');
  element.style.backgroundColor = 'red';
  element.style.width = '200px';
  element.style.height = '200px';


const element = document.getElementById('container');
  element.style.cssText = 'background:red;width:200px;height:200px;';
  
const element = document.getElementById('container);
element.className = 'test';

 

4. <table> 레이아웃을 피하자

콘텐츠의 값에 따라 테이블 너비가 계산되기 때문에 테이블 콘텐츠의 변경은 테이블 너비의 계산이 다시 이루어지게 되고, 모든 노드의 reflow가 발생한다.

 

RePaint

paint 과정 다시 실행.

레이아웃 변경이 아닌 시각적인 요소만 변경될 때 발생.

 

Reflow와 RePaint 생략

critical rendering path 과정에서 Layout , Paint 과정을 생략하고 다시 행함. 이 과정에서는 GPU의 도움을 받게 된다.

 

기본 개념은 위와 같다.

 

그렇다면, 언제 저런 과정을 거치는가이다.

위와 같이 Layout 혹은 Paint 과정이 굳이 필요 없을 경우에는 각 과정을 생략하여 최적화를 진행하도록 한다.

 

그렇다면 어느 때 이에 대한 필요성을 많이 느낄가?

 

애니메이션이다.

 

브라우저의 경우 초당 최대 60프레임을 노출시킨다. 이에 대한 제약 때문에 애니메이션이 짧은 순간에 critical rendering path 를 계속 진행 시키면 초당 60프레임을 표현하지 못하는 경우가 생겨버리기 때문에 버벅이는 현상이 발생한다.( 쟁크 현상 ) 

이처럼 쟁크 현상을 없애기 위해 적절하게 Reflow, RePaint 를 고려하면 될것이다.