Reflow & Repaint

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 애니메이션의 성능