브라우저가 페이지의 구성요소 전체(Html, Javascript, CSS)를 내려받으면 기본족으로 내부적인 데이터 구조 두가지를 만든다
DOM 트리 : 페이지 구조를 나타내는 것
렌더트리 : DOM 노드를 어떻게 표시할 지 나타내는 것
렌더트리는 DOM트리 노드 중 표시할 모든 노드에 대해 적어도 하나의 노드르 만든다. 렌더트리에 있는 노드는 페이지 요소를 마진, 패딩, 테두리, 포지션등 박스로 취급하는 CSS모델과 연관해서 프레임 또는 박스로 불린다. DOM 트리와 렌더트리를 다 만들면 브라우저는 페이지 요소를 표시(페인트) 할 수 있다.
DOM이 완료가 되고 그 후에 DOM이 변경 되면 브라우저는 변경된 요소에 대해 구조, 위치, 디자인 등 다시 계산하여 DOM에 적용을 한다. 이러한 과정을 Reflow라고 하며 이 과정이 끝나면 브라우저는 영향을 받은 부분을 다시 그리는 작업을 Repaint라고 한다.
리플로우는 퍼포먼스 측면에서 보면 매우 고비용을 발생시키는 프로세스이고, 저성능 디바이스(핸드폰)에서는 특히 느린 DOM 스크립트를 발생시킨다.
Reflow의 사례
1) 윈도우 리사이징
2) 폰트의 변화
3) 스타일 추가 또는 제거
4) 내용변화(Input 텍스트 입력)
5) :hover 와 같은 CSS
6) 클래스의 Attribute 동적 변화
7) JS를 통한 DOM 동적 변화
8) 엘리먼트에 대한 offsetWidth / offsetHeight 계산 시
9) 스타일 Attribute 동적변화
Reflow를 피하라
1) 클래스 변화에 따른 스타일 변화를 원할 경우, 최대한 DOM 구조상 끝단에 위치한 노드에 주기
2) 인라인 스타일을 최대한 없애기
3) 애니며이션이 들어간 엘리먼트는 fixed, absolute 로 지정하기
4) 퀄리티와 퍼포먼스 사이에서 적절한 대응법
5) 테이블 레이아웃을 피하기
6) IE의 경우, CSS에서 JS표현식 쓰지 않기
7) JS를 통해 스타일 변화를 줄 경우, 한 번에 처리하기(큐 방식)
8) CSS 룰은 필요한 만큼만 사용
9) position:relative 사용 시 주의하기
참고 : http://lists.w3.org/Archives/Public/public-html-ig-ko/2011Sep/att-0031/Reflow_____________________________Tip.pdf
