Reflow, Repaint를 알아보자.

Reflow, Repaint를 알아보자.

Reflow, Repaint : 말 그대로 해당 요소를 다시 칠하고, 다시 플로우한다.

Reflow, Repaint의 개념을 이해하기 위해서는 브라우저의 작동 방식을 이해해야한다.

사실상 우리의 브라우저는 계속해서 같은 스타일로 있지 않는다.

개발자의 의도에 따라 어떤 노드에 무엇을 추가하고, 어떤 요소에는 스타일이 달라지기도 한다.

또한, 브라우저 크기를 조절하는 경우에도 스타일은 다시 계산된다. ( 뷰포트 변경 )

이럴 때 발생하는게 Reflow, Repaint 이다.

예를들어

1. 뭔가 변경됐음을 감지

2. 다시 브라우저 작동 과정을 반복

3. 리렌더링 진행

- 이러한 과정에서 리플로우와 리페인트가 발생한다.

Reflow의 원인

- 윈도우 리사이징 ( 뷰포트 변화는 global layout에 영향 )

- 폰트의 변화

- 스타일 추가 또는 제거

- 내용 변화

- :hover와 같은 css 작업

- 클래스 속성의 동적 변화

- JS를 통한 DOM 동적 변화

- 엘리먼트에 대한 offsetWidth / offsetHeight (화면에서 보여지는 좌표) 계산시

- 스타일 속성 동적 변화

위의 경우를 다 지킬수는 없지만 몇가지의 경우만 지켜보자.

Reflow, Repaint 최소화

: 완전히 피할 수는 없지만, 최대한 줄이는게 현명한 선택이다.

1) 최대한 DOM 구조 상 말단 노드에만 클래스를 사용

2) 인라인 스타일 자제 : 클래스를 사용할 것

3) 애니메이션은 position을 absolute와 fixed로 하자 ( 주변 레이아웃 영향 x )

4) 퀄리티와 퍼포먼스를 타협 ( 애니메이션 계산, 페이지 Reflow에 대한 CPU 퍼포먼스 비용을 고려하자 )

5) 테이블로 구성된 레이아웃 자제 ( 작은 변화도 테이블 전체 노드가 리플로우 발생 )

6) CSS에서의 JS 표현식 자제 ( 문서중 일부가 Reflow 될 때마다 표현식이 다시 계산되기 때문에 )

7) JS를 통한 스타일 변화는 최대한 그루핑한다.

8) CSS 하위 선택자는 필요한 만큼만 쓰자.

9) 일부 속성과 메서드는 자주 사용할 때 캐싱하자

10) position: relative 주의

출처

https://velog.io/@young_pallete/Reflow-Repaint%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

https://csstriggers.com/

from http://moretz0921.tistory.com/396 by ccl(A) rewrite - 2021-12-28 18:26:31