number-flow를 포크해 구형 브라우저를 지원하고, 모던 브라우저의 애니메이션 성능을 개선한 과정을 기록한다.
README
number-flow의 숫자 애니메이션을 구형 브라우저에서도 보여주려고 포크를 만들었다. 첫 글에서는 원본의 움직임을 유지하는 rAF 폴백 엔진을 다뤘다. 두 번째 글에서는 모던 브라우저에서도 남아 있던 스타일 재계산을 줄이기 위해 애니메이션을 합성 스레드에서 실행할 수 있는 형태로 바꾼 과정을 다룬다.
02 ITEMS
전체 글
in order
01
number-flow를 구형 브라우저로 이식하기: 다섯 가지 결정과 두 가지 번복
#browser#animation#oss
number-flow가 애니메이션을 켜는 최소 버전은 Chrome 125, Safari 17.2다. 이 하한을 Chrome 66과 WebKit 16.4까지 내리는 포크를 만들면서 내린 결정들과, 뒤집게 된 판단 두 가지, 그리고 자동 강등을 포기한 Safari 버그 조사의 기록.
수정 45분 · read
02
number-flow 성능 개선기: 애니메이션을 합성 스레드로 옮기기
#web-performance#animation#browser
구형 브라우저를 지원하도록 만든 number-flow 포크에서, 모던 브라우저의 애니메이션도 매 프레임 스타일을 재계산하고 있었다. 0.2.0에서 가산 합성의 움직임을 transform과 opacity 키프레임으로 옮긴 과정과 성능 측정, 마스크와 인터럽트에 남은 비용을 기록한다.
