[TIL] 리플로우 리패인트와 성능 최적화

https://blog.jaegwan.com/99

[TIL] 웹 브라우저 이해

브라우저 렌더링에 대해 위 게시글에서 더 자세히 설명했다.

 

 

돔 객체 수정시 일반적으로 수정은 리플로우 단계부터 일어난다.

 

리플로우에서는 크기와 위치를 재조정하는 과정을 거치며

리페인트에서는 스타일을 입히는 과정을 거친다.

 

리플로우를 일으키는 작업을 하면 순차적으로 리페인트까지 일어나게 되는것이다.

 

만약 특정 요소의 위치를 변경하거나 크기를 키워야한다면 

transform을 조작하는 방법과 position을 조작하는 방법 두가지가 있다. 

 

 

.element {
  transform: translate(20px, 20px);
}

.element {
  position: relative;
  top: 20px;
  left: 20px;
}

 

두 방법 모두 결과적으로는 동일하지만 성능상의 차이를 보일 수 있다.

 

DOM 조작시

transform의 경우는 스타일을 변경하여 리패인트를 거치고

position의 경우는 크기나 위치를 변경하여 리플로우를 변경하고 순차적으로 리패인트까지 거치게 된다.

각각 단계의 변경 이유 :

 1. DOM 트리 변경:
   - 실제 DOM 구조에 변화가 있을 때 발생합니다 (예: 요소 추가/삭제, 텍스트 변경).

 2. 렌더 트리 변경:
   - DOM 트리의 변경, 또는 CSS 스타일의 변경에 의해 발생합니다.
   - 렌더 트리는 DOM 트리와 스타일 정보를 바탕으로 생성됩니다.

 3. 리플로우 (Reflow):
   - 렌더 트리의 변경이 레이아웃에 영향을 주는 경우 발생합니다.
   - 요소의 크기, 위치 등 레이아웃 관련 속성이 변경되면 발생합니다.

 4. 리페인트 (Repaint):
   - 렌더 트리의 변경이 시각적인 스타일에 영향을 주는 경우 발생합니다.
   - 색상, 테두리 등 시각적 스타일이 변경되면 발생합니다.