[animatable-js] 애니메이션 성능 향상 폭 평균 600% 이상을 이루어낸 이야기
오늘도 평소와 다름없이 내 깃허브에 소중하게 관리되고 있는 나의 애기들, 패키지들을 유지보수하기 위해 코드를 살펴보던 중, animatable-js의 Ticker 클래스가 눈에 띄었다. 이 클래스를 자세히 살펴보던 순간, 자바스크립트의 requestAnimationFrame 함수를 빈번하게 호출하면 브라우저의 렌더링 동기화 과정에서 상당한 성능 비용이 발생하지 않을까 하는 작은 의문이 들었다. 물론 자바스크립트 내에서 콜백 함수를 등록하고 호출하는 행위 자체는 그리 큰 비용이 들지 않는다. 하지만 requestAnimationFrame은 브라우저가 제공하는 API이며, 이를 통한 렌더링 동기화 과정에서 발생할 수 있는 여러 가지 성능 이슈의 가능성을 고려해 보았다.이러한 고민 끝에 실제로 테스트를 해보는..
일기
2024. 7. 22. 10:44
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- Factory Method
- typescript-preact-webpack
- android
- 객체 지향
- html-inline-webpack-plugin
- 최적화
- 깃허브 터짐
- jetpack compose
- Reflow
- svg
- 아이콘 템플릿
- 아이콘 개발
- 팩토리 메서드
- 백터 이미지
- 깃허브
- 객체지향
- 디자인 패턴
- github
- 무료 svg 툴
- webpack
- Flutter
- 타입스크립트
- 안드로이드
- web
- svg 툴
- 안드로이드 개발
- 조건부 타입
- JavaScript
- TypeScript
- mangler
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
글 보관함