브라우저 렌더링 - 리플로우(Reflow)와 리페인트(Repaint)

렌더링 과정

1) DOM 트리 생성

2) 스타일 구조체 생성

3) 렌더 트리 생성

4) 레이아웃 처리

5) Paint

6) 페이지 기능에 따라 Reflow, Repaint가 추가로 발생

reflow

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

function reflow() {
	document.getElementById('test').style.width = '100px';
    return false;
}

repaint

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

수치와 상관없는 background-color, visibillty, outline 등의 스타일 변경 시에는 Reflow 과정이 생략된 Repaint 작업만 수행함.

function repaint() {
    document.getElementById('test').style.backgroundColor = 'red';
    return false;
}

reflow와 repaint는 부하가 높기 때문에, UX를 안좋게 하거나 UI의 반응이 느려지는 원인이 된다.

특히 reflow가 더 부하가 높기땨문에 DOM 조작 시 성능을 염두한 코딩이 필요하다.