브라우저 ReFlow

오늘은 브라우저 리플로우에 대해서 공부해보려고 한다!

우선 리플로우에 대해 공부하려면 렌더링이라는 게 무엇인지 확실히 알 필요가 있다.

렌더링이란 무엇일까?

렌더링 과정은 다음과 같다.

1. DOM(Document Object Model), CSSOM(CSS Object Model) 생성
2. Render Tree 생성
3. Layout
4. Paint

리플로우란 어떤 액션이나 이벤트에 따라 html 요소의 크기나 위치 등 레이아웃 수치를 수정하면 그에 영향을 받는 모든 노드들이 Layout 과정을 다시 수행하게 되고, Render Tree와 각 요소들의 크기과 위치를 다시 계산하는 과정을 말한다.

말만 들어도 리플로우가 자주 일어나면 굉장히 많이 렌더링을 다시 하겠구나..하고 알 수 있다. 그래서 우리는 리플로우를 최소화 해야한다.

Reflow가 일어나는 대표적인 경우는 다음과 같다.

• 페이지 초기 렌더링 시(최초 Layout 과정)
• 윈도우 리사이징 시 (Viewport 크기 변경시)
• 노드 추가 또는 제거
• 요소의 위치, 크기 변경 (left, top, margin, padding, border, width, height, 등..)
• 폰트 변경 과(텍스트 내용) 이미지 크기 변경(크기가 다른 이미지로 변경 시)

리플로우만 수행이 된다면 실제 화면에 보이지 않는다.

그래서 화면에 그려주는 작업이 필요한데 바로 그 작업이 Paint 작업이다.

Reflow가 되면 1+1처럼 RePaint 작업도 수행되는데 무조건 Reflow가 일어나야 RePaint가 일어나는 것은 아니다.

예를 들어 background-color 등과 같이 레이아웃에는 영향을 주지 않는 스타일 속성이 변경되었을 때는 Reflow를 수행하지 않는다.

리플로우와 리페인트를 어떻게 줄일 수 있을까?

여러 가지 방법들을 알아보자 !

1. 사용하지 않는 노드에는 visibilty: invisible 보다 display: none을 사용하기

   • visibilty: invisible 속성은 레이아웃 공간을 차지하기 때문에 Reflow의 대상이 된다. 하지만 display: none은 레이아웃 공간을 차지하지 않으므로 렌더트리에서 제외된다!

2. Reflow, Repaint 가 발생하는 속성 사용 피하기

   • 리플로우가 일어나는 대표적인 속성
     

   

   • 리페인트가 일어나는 대표적인 속성
     

   리플로우가 일어나면 필연적으로 리페인트가 일어나기 때문에 가능하다면 리플로우가 일어나는 속성을 줄이고, 리페인트만 발생하는 속성을 사용하자! (근디..리플로우 속성들이 너무...피료해~..😓)

3. 영향을 주는 노드 줄이기
   - 레이아웃의 변화가 많은 요소의 경우 position : absolute, fixed를 사용해서 영향받는 주변 노드들을 줄일 수 있다. fixed는 다른 노드들에게 영향을 주지 않기때문에 리페인트만 일어나게 된다.

   fixed positioning이 적용된 엘리먼트는 부모 엘리먼트로 부터 완전히 독립되어 다른 엘리먼트의 구애받지 않고 화면에 어디든지 원하는 위치에 자유롭게 배치될 수 있습니다.

4. 프레임 줄이기
   • 부드러운 애니메이션 효과를 위해 1초에 몇 번씩 요소를 이동하게 한다면 그만틈 프레임이 늘어날 수 밖에 없다. 프레임이 늘어날 수록 리플로우, 리페인트 연산비용이 늘어난다.

추가적으로 아래는 구글에서 제공하는 리플로우를 최소화 하는 방법이다.⤵️

1. 불필요한 DOM 심도를 줄입니다. DOM 트리의 수준 하나를 변경하면 트리의 모든 수준, 즉 위로는 루트, 아래로는 수정된 노드의 하위 요소에 이르기까지 모두 변경될 수 있습니다. 이에 따라 리플로우를 실행하는 데 더 많은 시간이 걸리게 됩니다.
2. CSS 규칙을 최소화하고 사용되지 않는 CSS 규칙을 삭제합니다.
3. 애니메이션과 같이 복잡한 렌더링 변경이 필요한 경우 흐름 밖에서 변경합니다. 변경할 때는 절대 위치나 고정 위치를 사용합니다.
4. 불필요하고 복잡한 CSS 선택기, 특히 하위 요소 선택기는 사용하지 않습니다. 이 경우 선택기를 일치시키기 위해 더 높은 CPU 처리량이 필요합니다.

요새는 웹 브라우저의 성능이 뛰어나기 때문에 성능 개선을 잘 고려하지 않는다. 하지만 이런 기초적인 지식을 학습해놓으면 언젠간 꼭 필요한 날들이 올 거라고 믿는다! 부족한 내용이지만 읽어주셔서 감사하고 , 피드백은 언제나 환영합니당 ☺️

출처 및 참고 :
https://developers.google.com/speed/docs/insights/browser-reflow?hl=ko
https://boxfoxs.tistory.com/408