jakearchibald/svgomg

Revisit `setTimeout` usage/JS animations

Open

#332 opened on Sep 29, 2021

View on GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (5,473 stars) (474 forks)batch import
enhancementhelp wanted

Description

There are known performance issues with setTimeout. IIRC requestAnimationFrame should behave better.

I notice junky settings checkboxes animation on Firefox for Android when Power Saving is enabled on the device. Not sure it's related, but it would probably be better to use rAF anyway?

EDIT: we are also using offsetLeft is ripple. Not sure if there's a better way to do the same thing nowadays.

Contributor guide

Tech stack
javascriptcss
Domain
frontendperformance
Issue type
performance
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
basic JavaScriptunderstanding of requestAnimationFrame
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Search the codebase for all uses of setTimeout, especially in animation related code. Replace them with requestAnimationFrame to improve performance. Additionally, review the ripple effect implementation that uses offsetLeft and consider modern alternatives like getBoundingClientRect or CSS transforms. The issue does not specify files, so start by examining JavaScript files handling animations or UI interactions.