애니메이션 성능최적화

aaabbb12·2020년 12월 8일
0

오늘 인터넷써칭 중 발견했는데 정리해놓으면 좋을거같아서 가져와봤다
입사초부터 자주 보이던 주제이긴한데 이때까지 적어도 3-4번은 본것같다. 근데 볼때마다 새롭,,..
자꾸 까먹어서 메모를 해놔야겠다. 근데 맞게 이해한건진 모르겠다(?)..🙄

애니메이션 성능향상 TIP

CSS

리플로우(Layout)나 리페인트(Paint) 줄이기

  • 레이아웃에 영향을 미치는 속성 : Width, Height, Padding, Margin
  • 페인트에 영향을 미치는 속성 : Color, Background, Background-Image, Border

✔ 영향을 미치지 않는 권장속성 : Opacity, Rotate, Translate, Scale

JavaScript

  • setTimeoutsetInterval을 피하고 RequestAnimationFrame 사용
  • 애니메이션을 인라인 스타일로 넣는 것은 피하기
  • 애니메이션과 이벤트 분리
  • 리플로우, 리페인트 유발하는 스타일이나 메소드 사용하지않기
  • Matrix 3D Transformation로 GPU가속 사용하기
    3D요소, perspective transform, CSS Animation등을 사용하면 브라우저가 DOM을 Layer로 구성
    (layer composite을 이용하여 paint와 layout이 발생되지 않도록 유도하는 것이 성능적으로 이점을 얻을 수 있다)

느낀점

전에 했던 작업물 중에 mouseWheel이벤트에 애니메이션을 대거 연결한 적 있었는데..엄청 버벅거려서 대굴빡 꺠졌던 기억이..,,,
제이쿼리 인라인으로 넣었던 스타일들을 addClass로 CSS에서 처리하도록 수정하고, 애니메이션들은 중복코드 없도록 펑션으로 분리해서 이벤트에 연결시켜주는 등 전체 리팩토링 후 버벅거림이 많이많이 줄었던 기억이 난다. 딱 고생했던 부분 그대로 적혀있어서 확 와닿았다

RequestAnimationFrame은 저번 클론코딩때도 한번 공부했었는데 이해가 안가서 제꼈었다. 근데 다시 보긴해야될듯

Matrix 3D요소는 CSS애니메이션류인줄 알았는데 JavaScript랑 무슨 연관이 있는건진 모르겠다,, 이부분은 이해가 안감

reference

https://foodchain.tistory.com/155?category=578826
https://boxfoxs.tistory.com/408
http://sculove.github.io/blog/2013/12/05/animation-for-performance/

profile
자기계발일지. 디자인+퍼블짬밥 1년4개월된 초보자입니다.. 여긴 개발자분들만 계시넹

0개의 댓글