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

애니메이션 성능향상 TIP

CSS

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

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

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

JavaScript

• setTimeout과 setInterval을 피하고 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/