Layout
뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산
상대적 위치(%, vh, vw 등), 크기 속성은 실제 화면에 그려지는 pixel 단위로 변환
Paint
실제 픽셀 크기 값을 채워 넣음
텍스트, 색, 이미지, 그림자 효과 등을 그림
Reflow
- 페이지 렌더링 초기
- 윈도우 리사이징
- 노드 추가, 삭제
- 요소의 크기, 위치 변경
- font 변경(font-family, font-style), 텍스트 변경, 이미지 변경
Repaint
- 레이아웃에 영향을 주지 않는 스타일 속성 변경 시
- color, background-color, visibility, text-decoration, outline, box-shadow
Composite
- 생성한 레이어 계층을 합성하고 화면에 나타냄
- opacity 적용(opacity는 1보다 작아야)
- transform
- will-change
- video 혹은 canvas 태그 사용
- Composite Layers 생성은 CPU가 애니메이션을 처리하기 위해 GPU와 통신하는 단계
transform, opacity와 같은 속성을 사용하면, CPU 대신 GPU를 사용해 웹 브라우저가 애니메이션을 수행할 수 있도록 할 수 있음
Stick to Compositor-Only Properties and Manage Layer Count
[naver D2 브라우저는 어떻게 동작하는가?]
[csstrigger]
[블로그] CSS 애니메이션의 성능