일부 또는 전체 페이지를 다시 렌더링하기 위해 브라우저가 페이지 요소의 위치와 기하학적 구조를 다시 계산하는 프로세스를 리플로우라고 합니다. 리플로우는 브라우저에서 사용자를 차단하는 작업이므로 리플로우 수를 줄이는 방법과 다양한 문서 속성(DOM 깊이, CSS 효율성, 유형 없는 스타일 변경)이 리플로우 수에 미치는 영향을 이해하는 것이 중요합니다. 개발자에게 매우 필요합니다. 때때로 리플로우 페이지의 요소는 상위 요소(주석: 여기에서는 복수형)와 모든 하위 요소를 리플로우합니다.
리플로우를 트리거할 수 있는 다양한 사용자 작업 및 DHTML 변경 사항이 있습니다. 브라우저 창의 크기를 조정하고, 자바스크립트를 사용하여 스타일( 계산된 스타일 )을 계산하고, DOM에서 요소를 생성 및 삭제하고, 요소 클래스를 변경하면 리플로우가 트리거됩니다. 일부 작업은 상상 이상으로 리플로우를 여러 번 트리거한다는 점은 주목할 가치가 있습니다. 다음 그림은 Steve Souders의 연설 " Even Faster Web Sites "에서 발췌한 것입니다.
위의 표에서 모든 JavaScript 제어 스타일이 모든 브라우저에서 리플로우를 트리거하는 것은 아니며, 트리거되더라도 횟수가 동일하지 않다는 것이 분명합니다. 동시에 최신 브라우저의 리플로우 수 제어 능력이 점점 더 좋아지고 있음을 알 수 있습니다.
Google에서는 다양한 방법으로 페이지와 웹 애플리케이션의 속도를 측정하는데, 리플로우는 UI를 추가할 때 고려하는 핵심 요소입니다. 우리는 생생하고 상호작용적이며 즐거운 사용자 경험을 제공하기 위해 노력하고 있습니다.
원칙적으로
리플로우를 줄이기 위한 몇 가지 원칙은 다음과 같습니다.
아래 동영상(주석: YouTube에서 인용, 볼 수 없음, 벽을 우회하려면 원문으로 이동하세요)에서 Lindsey는 리플로우를 줄이는 몇 가지 방법을 소개합니다.
추가 읽기
원본 번역: http://www.99css.com/2009/06/minimizing-browser-reflow.html