[The RED : 프론트엔드 Back to the Basics] 10. 애니메이션 성능

자바스크립트 : 시각적 변화 유발
스타일 : 어떤 규칙을 어떤 요소에 적용할지 계산
레이아웃 : 요소가 화면에서 차지하는 공간과 위치 계산. 다른 요소에 영향을 줄 수도 있음
페인트 : 각 레이어에 픽셀을 그려내는 과정. 텍스트,색,이미지,경계선,그림자 등 표현
합성 : 정해진 순서로 레이어를 합성해 최종 결과물을 그려냄

성능을 좋게 하려면 메인스레드에서 일어나는 과정은 줄이고 컴포지터 스레드로 쓰는것이 좋음

각 단계의 동작을 유발하는 CSS 속성 아래에서 확인 가능
https://csstriggers.com/