브라우저 리플로우 최소화

작성자: Lindsey Simon, UX 개발자

추천 지식: 기본 HTML, 기본 자바스크립트, CSS 실무 지식

리플로우는 문서 내 요소의 위치와 도형을 다시 계산하기 위한 웹브라우저 프로세스의 이름으로, 문서의 일부 또는 전체를 다시 렌더링하는 데 사용됩니다. 리플로우는 브라우저에서 사용자를 차단하는 작업이므로, 개발자가 리플로우 시간을 향상하는 방법을 이해하고 다양한 문서 속성(DOM 심도, CSS 규칙 효율성, 다양한 스타일 유형 변경)이 리플로우 시간에 미치는 영향을 이해하는 것이 중요합니다. 간혹 문서에 있는 단일 요소를 리플로우하려면 상위 요소 및 이어지는 모든 요소도 리플로우해야 할 수 있습니다.

리플로우를 트리거할 수 있는 사용자 작업 및 가능한 DHTML 변경사항은 매우 다양합니다. 브라우저 창의 크기 변경, 계산된 스타일이 수반되는 자바스크립트 메소드 사용, DOM에서 요소 추가 또는 삭제, 요소 클래스 변경은 리플로우를 트리거하는 몇 가지 예입니다. 또한 일부 작업에서 리플로우 시간이 예상보다 오래 걸린다면 Steve Souders의 '더욱 빠른 웹사이트'에서 가져온 다음 다이어그램을 참조하세요.

위의 표에는 모든 브라우저에서 자바스크립트의 일부 스타일 변경만 리플로우를 야기하며 리플로우에 걸리는 시간도 다양하다는 점이 명확히 나타나 있습니다. 또한 최신 브라우저에서 리플로우 시간이 향상된다는 점도 어느 정도 분명합니다.

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

가이드라인

다음은 웹페이지에서 리플로우를 최소화하는 데 도움이 되는 간단한 가이드라인입니다.

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

다음 동영상에서 Lindsey는 페이지에서 리플로우를 최소화할 수 있는 몇 가지 간단한 방법을 설명합니다.

추가 리소스