[Extra] Reflow와 Repaint

1. Reflow와 Repaint란

웹페이지의 렌더링 과정중 발생하는 것으로 

부하가 높음. UI가 느려지는 원인이 됨.

특히 Refolw부하가 더 높기 때문에 최대한 피하는 편이 좋음

2. Reflow와 Repaint

-Reflow 

크기와 위치에 맞게 브라우져에 셋팅되는 과정

-Repaint

시각적인 요소가 셋팅되는 과정

배경색 -> 배경이미지 -> 테두리 -> 자식 -> 아웃라인

3. Reflow와 Repaint 사례

Reflow 사례	Repaint 사례
Render Tree (Layout)에 영향을 주는 행동을 했을 경우 발생  영향을 받은 모든 노드의 수치를 다시 계산하여 렌더트리 재생성	Render Tree (Layout)에 영향을 주지 않는 것을 변경했을 경우 발생
1) 윈도우 리사이징(너비 높이 변경)  2) 폰트 변화  3) 스타일 추가, 제거  4) 내용 변화 (input 텍스트 입력)  5) JS를 통한 DOM 동적 변화	1) background-color  2) visibillty, outline등 스타일 변경

* 단, 노드의 위치, 크기변경되는 경우, 노드가 추가, 삭제되는 경우는 Reflow, Repaint 모두 발생

4. Reflow 피하는 방법

1) 인라인 스타일 지양하기

2) table-layout:fixed 제외, 테이블은 사용 지양하기 (점진적 렌더링에 방해되지 않도록 table-layout:fixed사용)

3) 변경이 자주 일어나는 요소는 Absolute에 배치 (전체 노드에서 분리)

배치 방법

* Normal : 문서안 위치는 유형, 면적에 따라 배치, 랜더트리에서 DOM트리 위치와 동일

* Float : Normal과 같이 배치된 후 왼쪽 or 오른쪽으로 이동

* Absolute : DOM트리와 다른 트리에 배치 (position:absolute, position:fixed)

4) 스타일 변경은 DOM구조상 제일 끝단 노드에서 수행

5) 스타일 변경은  한번에 처리하기

6) 스타일 최적화 하기(CSS최소화)

7) IE의 경우 CSS에서 js표현식 쓰지 않기

8) position:relative사용시 주의 하기

참고 : http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/