최적화에 대해 알아보며 나한테 묻는 QA

Q: 애니메이션의 최적화와 Reflow / Repaint 개선 방법은?

A

먼저, 컨텍스트 관점에서의 최적화는 CSS 애니메이션 중에 Transform과 Opacity와 같은 속성 변경은 컴포지터 스레드에서 처리되어서 메인 스레드와 병렬 처리가 가능하지만, JS 애니메이션은 항상 메인 스레드에서 처리되기 때문에 블로킹이 발생할 수 있습니다.
따라서, JS에서 처리되고 있는 애니메이션 중 CSS로 처리가 가능한 애니메이션을 CSS에서 처리함으로써 성능 개선이 될 수 있습니다.

 

리플로우 개선으로는 애니메이션이 들어간 요소의 Position은 Fixed나 absolute로 지정한다거나, 인라인 스타일을 최소화시키고 ClassName의 변화에 따라 스타일이 변경될 경우 Reflow를 완전히 피할 수는 없지만 DOM 구조상 말단에 위치한 노드에 해당 ClassName을 주어 리플로우의 행동반경을 전체가 아닌 일부 노드로 제한 시켜줄 수 있습니다.

 

---

Q: RequestAnimationframe을 사용한 성능개선

A

자바스크립트로 애니메이션을 구현할 때, 1초에 60프레임정도를 찍어내면 되는데 이 프레임을 찍어내기 위해 사용할 수 있는 방법은 SetInterval과 RequestAnimationFrame이 있습니다.
SetInterval 보다 RequestAnimationFrame이 더 좋은 이유는 브라우저가 프레임 생성 초기 단계에 맞춰서 애니메이션 코드를 실행시키기 때문에 더 부드럽게 동작하고, 타임아웃이나 인터벌은 프레임을 신경쓰지 않고 동작해서 뚝뚝 끊기는 현상이 일어날 수 있는데 RequestAnimationframe을 사용하면 프레임 생성 시작시간에 맞춰 코드를 시작하기 때문에 최적화된 부드러운 속도로 표현할 수 있고 성능도 개선할 수 있습니다.

---

Q:  함수를 분리함으로써 얻는 이점은?

A

하나의 함수에 비즈니스가 너무 몰려있고 그래서 그 안에 변수 혹은 함수가 너무 많아져서 생기는 문제들을 함수를 분리해 줌으로써 react에서 제공하는 Hooks API를 통해 최적화가 가능하며 재사용성도 높아지고 콜스택의 부담도 덜어줄 수 있습니다.

 

또한 비즈니스가 몰리다보니까 함수 안에 함수가 구현되어 호출되는 경우도 있을 수 있는데 GC로 처리되어야 하는 함수임에도 불구하고 참조가 계속 발생되어 GC가 처리하지 못해서 메모리 누수가 발생하는 경우도 해결할 수 있습니다. [ 클로저의 단점 ]