[문제발생] - 모바일 : 애니메이션 버벅임 현상

문제발생

조건 : 저사양의 안드로이드 모바일에서 Swiper 넘기는 애니메이션 실행
문제내용 : 애니메이션 실행 시 퀄리티에 영향을 끼칠 정도로 프레임 드랍 발생
요구조건 : 퀄리티가 영향을 받으면 안 됨

문제원인

1. swiper.onInit시에 requestAnimationFrame기능 실행
2. 첫번째 swiper가 움직인 좌표값을 실시간으로 계산
3. 계산한 값으로 두번째 스와이퍼(디자인용)에 CSS path, transform:traslate(X)를 처리
4. 두번째 스와이퍼의 슬라이드 아이템에는 blur 효과가 적용 중
5. blur된 값이 클 수록 렌더링 계산이 더 커짐, 이 요소를 transform함으로 더욱 계산이 커짐.
   

문제원인파악

저사양에서만 발생했던 문제였으므로 데이터가 아닌 곳에서 문제가 발생하는 것으로 판단.

• 첫번째 시도 방법 : 소거법 => 가장 의심 갔던 requestAnimationFrame을 제거
  => requestAnimationFrame가 총 2개가 실행 중이었음.
  => blur 계산을 담당하던 requestAnimationFrame을 지우니까 프레임 드랍이 해소됨.

해결방안

blur속성을 제거하여 디자인 컨셉을 변경

결과

path, translate(X)의 값만 requestAnimationFrame으로 계산하니까 프레임 드랍이 해소됨

느낀 점

꼭 자바스크립트만이 고도의 연산 기능을 필요로 하는 것이 아니다.
이 전에도 비슷한 예시로, transform:translate(X,Y)를 많은 요소에 할당했을 때 페이지에서 팅기는 현상이 발생했었는데, 그 경험 덕분에 오류를 빨리 잡을 수 있었다.
애니메이션 요소에는 CSS filter 속성은 지양해야한다고 디자이너와 이야기했다.