[Enhancement] Optimize tween, animate and RafService for browser performance
#721Comparing
feat/tween-animate-performance
(ee20d3e
) withmain
(b87ad04
)-41%
- Improvement
- 14
- Regression
- 7
- Untouched
- 94
Benchmarks
115 total
create with simple keyframes (opacity)
packages/tests/__benchmarks__/animate.bench.ts::animate::creation-41%
107.1 µs181.3 µs
create with easing per keyframe
packages/tests/__benchmarks__/animate.bench.ts::animate::creation-35%
153.6 µs235.2 µs
start/pause cycle
packages/tests/__benchmarks__/animate.bench.ts::animate::lifecycle-30%
148.6 µs211.5 µs
create with custom properties
packages/tests/__benchmarks__/animate.bench.ts::animate::creation-29%
124.2 µs174.7 µs
create with all options
packages/tests/__benchmarks__/animate.bench.ts::animate::creation-23%
151.2 µs196.1 µs
create with multiple transforms
packages/tests/__benchmarks__/animate.bench.ts::animate::creation-20%
158.8 µs198 µs
create with 4 keyframes
packages/tests/__benchmarks__/animate.bench.ts::animate::creation-17%
434.3 µs520.8 µs
trigger (50 callbacks, read only)
packages/tests/__benchmarks__/services.bench.ts::services::RafService.trigger()×10
496.2 µs47.4 µs
create with transform keyframes (x, y)
packages/tests/__benchmarks__/animate.bench.ts::animate::creation+81%
306.1 µs168.7 µs
trigger (50 callbacks, read + write)
packages/tests/__benchmarks__/services.bench.ts::services::RafService.trigger()+58%
106.2 µs67.2 µs
getInstances() (100 instances, copy Set)
packages/tests/__benchmarks__/base.bench.ts::Base internals::getInstances+50%
41 µs27.4 µs
create tween with bezier curve
packages/tests/__benchmarks__/tween.bench.ts::tween::creation+26%
469 µs372.2 µs
getAllProperties (no filter)
packages/tests/__benchmarks__/base.bench.ts::Base internals::getAllProperties+25%
64.6 µs51.6 µs
trigger (10 callbacks, read only)
packages/tests/__benchmarks__/services.bench.ts::services::RafService.trigger()+25%
43.7 µs34.9 µs
progress update (x, y transform)
packages/tests/__benchmarks__/animate.bench.ts::animate::progress updates (single element)+22%
372.7 µs305.7 µs
progress update (5 transforms)
packages/tests/__benchmarks__/animate.bench.ts::animate::progress updates (single element)+19%
365.5 µs307.8 µs
progress update (4 keyframes)
packages/tests/__benchmarks__/animate.bench.ts::animate::progress updates (single element)+17%
464 µs396.1 µs
trigger (10 callbacks, read + write)
packages/tests/__benchmarks__/services.bench.ts::services::RafService.trigger()+17%
47.9 µs41 µs
progress with numeric stagger
packages/tests/__benchmarks__/animate.bench.ts::animate::staggered animations+17%
1.2 ms1 ms
progress update (5 elements)
packages/tests/__benchmarks__/animate.bench.ts::animate::progress updates (multiple elements)+14%
939 µs826.5 µs
progress update (10 elements)
packages/tests/__benchmarks__/animate.bench.ts::animate::progress updates (multiple elements)+11%
2.7 ms2.4 ms
progress update (opacity only)
packages/tests/__benchmarks__/animate.bench.ts::animate::progress updates (single element)+10%
374.2 µs340.9 µs
normalize undefined (fallback to linear)
packages/tests/__benchmarks__/tween.bench.ts::tween::normalizeEase+9%
12.9 µs11.9 µs
progress update (3 custom properties)
packages/tests/__benchmarks__/animate.bench.ts::animate::progress updates (single element)+7%
524 µs488.2 µs
normalize function
packages/tests/__benchmarks__/tween.bench.ts::tween::normalizeEase+7%
13.5 µs12.6 µs
Commits
Click on a commit to change the comparison rangeBase
main
b87ad04
-40.91%
Update changelog with performance improvements
ee20d3e
7 days ago
by titouanmathis