"추가로 단지 애니메이션에만 해당하는 부분은 아닙니다. GPU와 관련된 웹 페이지의 렌더링 패스에 대한 이해는 프론트엔드에서 반응성 있는 웹페이지를 구현하는데 중요한 축입니다. +Paul Lewis 는 WebGL 기반의 3D 엔진인 three.js의 개발자로 렌더링 성능과 관련된 유용한 튜토리얼을 이미 올린바 있습니다. 이에 대한 부분은 참고 링크들에서 찾아보시기 바랍니다."
TL;DR;
CSS3 Animation과 Transition을 구현할 때 어떠한 속성이 하드웨어 가속이 가능한지 그리고 크롬 개발자 도구 '프레임(Frame)' 모드에서 볼수 있는 렌더링의 과정에 대해 각 엘리먼트가 어떻게 레이어로 변환되어 픽셀화(Rasterization) 과정이 이루어지는지에 대한 개괄적으로 설명합니다.
left, top을 이용한 위치 이동(좌)과 transform: translate()를 이용한 위치 이동(우)의 비교
본문에서 강조하는 고성능 애니메이션을 위한 CSS 속성 4가지는 다음과 같습니다.
- 위치 이동
- transform: translate()
- 확대/축소
- transform: scale()
- 회전
- transform: rotate()
- 투명도
- opacity: 0 ~ 1
참조 링크
- 원문 : High Performance Animations
- 번역 : 고성능 애니메이션, live!
- 성능 최적화
- 브라우저의 전반적인 동작
- 레이어 관련 렌더링 동작
- 크롬 개발자도구 기능
p.s. 프로젝트로 번역이 많이 밀려있는데 차주에 예정된 3종에 대한 번역 커밋을 진행할 예정입니다. :)
댓글 없음:
댓글 쓰기