리플로우와 리페인트

저번에 브라우저의 렌더링 과정에 대하여 정리하였으니 오늘은 리플로우와 리페인트에 대해서 정리해 보려고 한다.

 

브라우저 렌더링과 Reflow, Repaint의 관계

 

Layout은 요소의 위치, 크기를 계산하여 화면에 그리는 과정이며 reflow와 관련 있다.

 

paint는 배치된 요소의 스타일(색상, 굵기 등)을 적용하는 과정으로 repaint와 관련 있다.

 

reflow는 말 그대로 flow 과정을 다시 하는 작업이다. flow 작업은 곧 layout이며, reflow가 된다는 건 요소의 위치, 크기 계산을 다시 한다는 말이 된다. repaint는 paint 작업을 다시 하는 작업이고 paint는 요소에 스타일을 적용하는 과정이므로, repaint는 요소의 스타일을 재적용하는 것을 말한다.

 

 

리플로우와 리페인트

 

자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM 이나 CSSOM이 변경된다. 이때 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링 한다. 이를 리플로우, 리페인트라 한다.

 

 

리플로우(reflow)

 

리플로우는 노드 추가/삭제, 요소의 크기/위치 변경, 윈도 리사이징 등이 변경되어 렌더 트리를 재생성하는 작업이다.

리플로우는 특정 요소에서 리플로우가 발생하면 주변 요소에도 영향을 주기 때문에 비용이 큰 작업이다.

 

요소의 너비, 높이 등 기하학적 속성 변경 외에도 DOM 관련 메서드를 실행하거나 DOM의 속성에 접근할 때도 리플로우가 발생한다.

 

참고:  https://gist.github.com/paulirish/5d52fb081b3570c81e3a

What forces layout/reflow. The comprehensive list.

 

 

리페인트(repaint)

 

리페인트는 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것을 말한다. (변경된 요소를 화면에 그려주는 작업)

리플로우가 발생했을 때, 요소의 스타일(색상, 배경색 등)이 변경되었을 때 visibility: hidden <-> visible로 변경될 때 리페인트가 발생한다.

 

visibility는 화면에서 공간을 차지하면서 보이지 않는 반면에 display: none은 영역을 차지하지 않으면서 보이지 않게 한다. 영역을 차지하지 않는다는 말은 렌더 트리에서 제외된다는 말이므로, display: none이 적용된 요소는 영역이 사라지면서 주변요소의 위치, 크기에도 영향을 주어 리플로우, 리페인트가 발생한다. 하지만 visibility: hidden이 적용된 요소는 단순히 보이지 않을 뿐 크기나 위치가 변하는 게 아니기에 리페인트만 발생한다.

 

리페인트는 요소의 스타일이 변경되었을 때 발생하므로 리플로우보다 비용이 적다.

 

리플로우와 리페인트가 반드시 순차적으로 동시에 실행되는 것은 아니다. 레이아웃에 영향이 없는 변경은 리페인트만 실행된다.