Web Browser의 Reflow와 Repaint

Hong·2022년 3월 9일
0

Render Tree란?

DOM과 CSSOM의 결합으로 생성되며 meta, head와 같은 비시각적 DOM 요소들과 display 속성의 'none' 값이 할당된 요소들의 노드들을 제외한 페이지에 표시되는 모든 DOM 콘텐츠와 각각의 CSSOM 스타일 정보를 담고 있다.

Reflow란?

Reflow란 DOM 요소의 크기나 위치가 변경되면 해당 노드에 관련된 노드들을 포함하여 Layout 단계를 다시 수행하는 것을 뜻한다. 따라서 변경하려는 요소 뿐 아니라 연관된 모든 요소들의 위치와 크기도 재계산을 하여 브라우저의 퍼포먼스를 저하시키는 요인이 되기도 한다. Reflow의 발생 여부는 크롬 Dev Tool의 Performance 탭을 통하여 확인할 수 있다.


Repaint란?

Repaint란 Reflow의 발생으로 변경 된 Render Tree를 다시 화면에 그려주는 과정인 Paint 과정이 다시 수행되는 것을 말하며 레이아웃에 영향을 주지 않는 color, background-color 등을 변경했을 때도 발생한다.

profile
코딩 배우기

0개의 댓글