Reflow & Repaint

tjdgus0528·2022년 4월 6일
0

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

profile
Frontend Developer, who has business in mind. Updating myself everyday :)

0개의 댓글