브라우저 렌더링 과정
- DOM, CSSOM 생성(서버로부터 받은 HTML, CSS를 다운로드)
- Render Tree 생성(DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이 둘을 이용하여 Render Tree를 생성)
- Layout (브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계)
- Paint(스타일이 복잡할수록 Paint 단계에 소요되는 시간이 늘어남)
요소의 스타일을 변경하기 위해 JavaScript가 실행되고 Style변경, 계산이 다시일어난다.
reflow가 일어나는 속성
position, width, height, left, top, right, bottom, margin, padding, border, border-width, clear, display, float, font-family, font-size, font-weight, line-height, min-height, overflow, text-align, vertical-align, white-space, ...
repaint만 일어나는 속성
background, background-image, background-position, background-repeat, background-size, border-radius, border-style, box-shadow, color, line-style, outline, outline-color, outline-style, outline-width, text-decoration, visibility, ...
reflow, repaint를 거치지 않는 속성
transform, opacitiy, cursor, orphans, perspective , ...
가능한 Repaint, Reflow가 일어나지 않는 속성을 사용하는게 높은 성능의 애니메이션을 구현하는데 바람직하다고 할 수 있다.
