requestAnimationFrame
Een web-API om een functie te plannen vlak vóór de volgende repaint van de browser, gesynchroniseerd met de verversingsfrequentie van het scherm. De juiste manier voor vloeiende JavaScript-animaties, in plaats van setTimeout of setInterval.
Het probleem: animeren met setInterval(fn, 16) is onbetrouwbaar. Het interval loopt niet synchroon met het scherm, waardoor frames overslaan of dubbel verschijnen, en de animatie blijft cpu verbruiken terwijl het tabblad verborgen is. requestAnimationFrame(callback) vraagt de browser de callback vlak voor het volgende frame uit te voeren, in de pas met het scherm (60 Hz, 120 Hz, wat het ook is). Dat geeft vloeiende animatie, en bij een onzichtbaar tabblad pauzeert het vanzelf, wat batterij en cpu spaart.
Patroon: de callback zet één animatiestap en roept rAF opnieuw aan voor het volgende frame. Gebruik: alle door JS aangestuurde animaties, gameloops, vloeiend scrollen, canvasrendering. Vuistregel: animeer met CSS waar het kan (nog goedkoper), maar is JS nodig, dan is rAF het juiste gereedschap.