• 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정
  1. DOM트리 만들기
  2. CSSOM 트리 만들기
  3. JavaScript 실행
     • HTML 중간에 script가 있다면 HTML 파싱이 중단된다.
  4. Render 트리 만들기
     • display:none과 같은 화면에 보이지 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다
  5. 레이아웃 생성하기(reflow)
     • viewport 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산
  6. 페인팅

Reflow, Repaint

Reflow

• 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향을 받은 모든 노드의(자신, 자식, 부모, 조상) 수치를 다시 계산하여 렌더 트리를 재생성하는 과정

Repaint

• Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리는 과정

Reflow 최적화 방법

• 클래스 변화에 따른 스타일 변경 시, 최대한 DOM 구조 상 끝단에 위치한 노드를 변경
• 인라인 스타일 최대한 배제
• 애니메이션이 들어간 노드는 가급적 position:fixed 또는 position:absolute로 지정하여 전체 노드에서 분리 시키도록 한다.
• CSS에서의 JS표현식을 피하라
  • Reflow가 일어날 때마다 표현식이 다시 계산되기 때문
• DOM과 스타일 변경을 하나로 묶어 리플로우 수행을 최소화한다.

function collect() {
	var el = document.getElementById('container');
	
	el = style.backgroundColor = 'red';
	el = style.width = '200px';
	el = style.height = '200px';

	// 위의 방식 대신에 

	el.style.cssText = 'background:red;width:200px;height:200px';

	return false;
}

• CSS에 정의된 class를 통해 한번에 CSS 적용하기
• 캐시를 활용한 Reflow 최소화
  • 브라우저는 레이아웃 변경을 큐에 저장했다가 한번에 실행하는 방법으로 reflow를 줄인다
  • 하지만 offset, scrollTop, scrollLeft 같은 값들은 요청할 때마다 정확한 정보를 위해 큐를 비우고 모든 변경을 다시 적용한다
    • 즉, 변수에 저장(캐시)해 요청 수를 줄인다