reflow

1. 리플로우란?

리플로우는 문서 내 요소의 위치와 도형을 다시 계산하기 위한 웹브라우저 프로세스의 이름으로, 문서의 일부 또는 전체를 다시 렌더링하는 데 사용된다.

리플로우는 브라우저에서 사용자를 차단하는 작업이므로, 개발자가 리플로우 시간을 향상하는 방법을 이해하고 다양한 문서 속성(DOM 심도, CSS 규칙 효율성, 다양한 스타일 유형 변경)이 리플로우 시간에 미치는 영향을 이해하는 것이 중요하다.

간혹 문서에 있는 단일 요소를 리플로우하려면 상위 요소 및 이어지는 모든 요소도 리플로우해야 할 수 있다.

2. 웹에서 리플로우를 최소하는 방법

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

Google에서는 다양한 방법으로 웹페이지와 애플리케이션의 속도를 테스트하며, UI에 기능을 추가할 때 리플로우를 주요 요인으로 고려하고 있습니다. 이는 활발하고 즐거운 양방향 사용자 환경을 제공하기 위함입니다.