브라우저 렌더링 과정
브라우저의 렌더링 과정을 보면 DOM트리와 CSSOM트리를 구축 후에 둘을 조합하여 렌더트리를 구축하고 이후에 뷰포트를 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산하는 (Layout/Reflow) 단계를 거치고 그를 기반으로 Paint단계를 통해 화면에 페이지를 그리게 된다. 이때 display: none은 화면상에 나타나지 않아 불필요하다 판단하여 렌더트리에서 제외시킨다. 하지만 visibility: hidden을 사용하면 repaint만 일어나게 되는데 그 이유는 layout이나 위치 변경이 없기 때문이다.
Reflow
대화형 사이트에서 갱신하고 난 이후의 경우와 같이 브라우저가 웹 페이지의 위치와 기하학적 구조를 다시 계산할 때 리플로우가 발생한다. 그 다음에는, 브라우저가 웹 페이지를 다시 그려 결과적인 시각적 갱신을 표시하는 리페인트가 따라온다. 즉, 레이아웃에 영향을 미치는 요소를 변경할 때 발생하며 DOM에서 모든 부모 및 자식 요소의 후속 Reflow를 발생시킨다.
=> DOM 노드에 무언가를 추가, 삭제, 업데이트할때 발생함
Repaint
리페인트(Repaint) 는 대화형 사이트의 업데이트와 같이 UI 변경으로 인한 시각적 업데이트를 표시하기 위해 브라우저가 웹 페이지를 다시 그릴 때 발생한다. 리페인트는 일반적으로 브라우저가 웹 페이지의 특정 부분의 위치와 기하학적 구조를 다시 계산하는 리플로우 후에 발생한다.
무엇이 Reflow와 Repaint를 발생시키는가?
- DOM 노드에 무언가를 추가, 삭제, 업데이트할때 발생함
- DOM 요소를
display: none으로 숨기면 reflow와 repaint 모두 발생한다. - DOM 요소를
visibility: hidden으로 숨기면 repaint만 발생한다. - 움직이거나, animation을 가지면 reflow와 repaint 모두 발생한다.
- Window의 Resizing은 reflow를 발생시킨다.
- font-style을 변경하면 elements의 지오메트리가 변경된다. 이는 페이지의 다른 요소의 위치나 크기에 영향을 미칠 수 있음을 의미하며, 둘 다 브라우저가 리플로우를 수행해야 한다. 레이아웃 작업이 완료되면 손상된 픽셀을 다시 칠해야 한다.
- 스타일시트를 추가하거나 제거하면 reflow와 repaint 모두 발생한다.
- DOM을 조작하는 스크립트는 문서 또는 문서의 일부가 수정될 때마다 다시 계산하기 때문에 비용이 많이 드는 작업이다. 리플로우를 유발하는 많은 것들에서 살펴보았듯이, 초당 수천 번 발생할 수 있다.
Repaint와 Reflow를 최소화 하기 위해선?
- 개별로 스타일을 하나씩 바꾸지 말아야한다. 가장 좋은 방법은 유지보수성과 가독성을 위해 클래스명을 변경하는 것이다. 스타일이 동적이라면
cssText속성을 편집해야한다. - DOM 변경을 일괄적으로 처리해야한다.
- 노드를 복제하고 업데이트 한 뒤에 교체.
- 계산된 스타일을 반복적으로 요청하지 말고 변수에 캐시해두기.
- DOM에서 여러 번 읽고 쓰기를 반복하면 문서 reflow가 발생한다.
- 해결방안: 먼저 모든 값을 읽은 다음 모든 값을 사용하기.
출처: https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg
