[DOM & BOM] 리플로우와 리페인트의 차이는 무엇인가?

[shinsehantan]

질문을 리플로우와 리렌더링의 차이는 무엇인가?로 잘못 올렸었는데, 리플로우와 리페인트의 차이는 무엇인가?로 정정하겠습니다. 혼란드려서 죄송합니다~~

[shinsehantan]

웹페이지를 처음 표시하면서 브라우저 렌더링이 일어난 후에도 어떤 액션이나 이벤트에 의해 렌더 트리에 변화가 일어나는데요. 이때 발생하는 것이 Reflow(Layout)와 Repaint입니다. Reflow란, HTMl 요소의 크기나 위치가 수정될 경우 그에 영향을 받는 렌더 트리의 각 요소들의 크기와 위치를 다시 계산하게 되는 과정을 말합니다. Reflow는 대표적으로 DOM 노드의 추가 및 삭제, DOM 노드의 위치 이동 및 애니메이션, 스크롤, display none 처리, 폰트 변경 등에 의해 일어납니다. Repaint란, Reflow가 수행되어 변화된 렌더트리를 화면에 다시 그려주는 과정입니다. 하지만 Reflow가 일어날 때에만 Repaint가 일어나는 것은 아니며, 레이아웃에 변경이 없는 background-color, visibility등의 스타일 속성이 변경된 경우에는 Repaint만 단독으로 수행됩니다. 리플로우와 리페인트는 부하가 높기 때문에, 사용자 경험(UX)을 안좋게 하고 UI의 반응이 느려지는 원인이 되는데요. 앞서 말했듯이 Reflow가 일어나면 Repaint는 동반 수행되기 때문에 조금이라도 부하를 줄이기 위해서는 Repaint만 발생하는 스타일 속성을 사용하는 편이 좋으며, Reflow가 일어나는 경우에도, 트리의 아래쪽 노드를 건드린다면 위의 노드들은 재계산되지 않을 수 있지만 위쪽에서 높이 변화 등이 일어나면 아래 노드들까지 전체적으로 영향을 미칠 가능성이 높아 그만큼 Reflow 범위가 커진다는 것도 항상 염두에 두어야 합니다.

[bucketHaneul]

질문이 조금 수정되면 좋겠다고 생각을 하는데요. 왜냐하면 리렌더링을 하는 과정 중 하나가 리플로우 이기 때문입니다. 변경된 코드로 DOM 트리 변경됨에 따라, 브라우저는 리렌더링을 하게 됩니다. 그러한 과정에서, 한 노드 즉, 한 엘리먼트의 크기나 위치 등 레이아웃과 관련된 부분이 변경되었다면, 이를 전부 계산하여 변경된 부분이 render tree에 반영되는데, 이를 리플로우라고 합니다.

질문이 조금 수정되면 좋겠다고 생각을 하는데요. 왜냐하면 리렌더링을 하는 과정 중 하나가 리플로우 이기 때문입니다. 변경된 코드로 DOM 트리 변경됨에 따라, 브라우저는 리렌더링을 하게 됩니다. 그러한 과정에서, 한 노드 즉, 한 엘리먼트의 크기나 위치 등 레이아웃과 관련된 부분이 변경되었다면, 이를 전부 계산하여 변경된 부분이 render tree에 반영되는데, 이를 리플로우라고 합니다.

[Tanney-102]

리플로우는 뷰포트 내 실제로 요소가 배치될 위치와 크기를 계산하는 과정이다.

리페인트는 리플로우를 마친 후 각 요소를 픽셀단위로 맵핑하는 과정이다.

[devhyun637]

리플로우는 형성된 Render Tree를 기반으로 기기의 뷰포트 내에서 어떤 요소가 어떠한 위치에 배치될 것인지를 계산하는 과정을 의미합니다. CSS 스타일이나 DOM 요소를 추가, 삭제, 수정을 할 때 다시 화면에 그려주어야 하는 요소들을 계산해야하기 때문에 리플로우가 발생할 수 있습니다.

리페인트는 레이아웃 단계를 마친 요소들을 레이어 별로 컴퓨터가 이해할 수 있는 비트맵으로 잘라서 준비하는 단계를 의미합니다. CSS 스타일을 변경함에 따라 레이아웃이 달라지면 리페인트가 발생할 수 있습니다.

[jum0]

자바스크립트 코드에서 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM이나 CSSOM이 변경되는데, 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링합니다. 여기서 리플로우는 다시 레이아웃을 계산하는 과정을 말하며, 노드의 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징 등 레이아웃에 영향을 주는 변경이 발생한 경우에만 실행됩니다. 리페인트란 재결합된 렌더 트리를 기반으로 다시 그리는 것을 말합니다. 여기서 리플로우와 리페인트가 반드시 순차적으로 동시에 실행되는 것은 아니라는 것입니다. 레이아웃에 영향이 없는 변경은 리플로우 없이 리페인트만 실행됩니다.

[ddongule]

이 두가지는 모두 우리가 만든 웹 문서를 브라우저에 렌더링할 때 발생합니다.

Reflow 모든 엘리먼트의 위치와 길이 등을 다시 계산하는 과정에서 발생합니다. 그리고 DOM의 일부 혹은 전체 렌더링 시, CSS 스타일의 추가, 제거나 변경, 혹은 Animation, Transition이 생길 때 발생합니다.

Repaint 실제 보이는 것들 즉 가시성에 영향을 주는 엘리먼트가 변경되면 발생합니다. (background, display 등등) 보통 Reflow가 발생하면 Repaint가 발생합니다. 브라우저가 DOM Tree에 있는 다른 노드들의 가시성을 모두 확인해야해서 Reflow보다 Repaint가 비용이 더 많이 듭니다.