Learn how to improve animation performance by using requestAnimationFrame() instead of setTimeout() in this video.
- In this chapter we're going to be looking at APIs that help you build web apps with better performance. And we are going to start off with a relatively simple API that improves the quality of animations in a webpage. So I'm going to open the finished example here using my live server extension. And you can see that it's just a simple animation in a canvas element on the webpage. So the API we're going to use is called request animation frame. And it's used to sync up the display refresh cycle with animation code in the browser. And before this API was available, developers had to use either set timeout or set interval in order to animate page content. The downside of that approach is that these functions are not very accurate and are not synchronized with the display refresh rate. So the result of this is that calls to set timeout or set interval might either be duplicated or dropped during screen paint cycles, which will produce a stuttering effect. Request animation frame fixes that problem by ensuring that it is only called once per display refresh cycle. So let's open the editor and build this example. Alright, so here I'm going to open up animation start.html. And you can see my page here has a canvas element which is right down here. Okay, here's my canvas. And it has some code that sets up the drawing environment, gets a reference to the canvas, initializes some content. And if you scroll down a little bit further, here's my initialization function. And if we scroll down there's an anim function and this anim function is called repeatedly to create the animation. So first, in the init function what I'm going to do is call the request animation frame function and assign the result to my animationRef variable here. And that will become clear a little bit later. So for now I'm going to say animationRef is equal to and I'm going to call request animation frame. And then I'm going to call the anim function. So it's kind of like set interval except that you don't specify a timing interval. The request animation frame just syncs up with whatever the display cycle is. Alright, so this starts the process. And we can use the reference value for this function to stop the animation later. So what we're going to do now is I'm going to have to call request animation frame again from within the animation function. And I'm not going to go deep into the animation code. You can follow it later on in your, or debunker it if you want to. What I'm going to do is, once again, animationRef is equal to request animation frame. And this time I'm going to have my animation function call itself. Now to stop the animation I call cancel animation frame with this reference value. So let's go ahead and scroll up and I have a button here that says stop animation and here's my event handler. So to stop the animation what I'm going to do is call cancel animation frame and I have my animationRef variable that I pass in. That's pretty much all there is to it. So let's go ahead and run this. And there you can see the animation is running and I can click stop and the animation stops. So if I refresh animation starts all over again, right? So using request animation frame is much more efficient that using set interval and it's supported in all of the major browsers so there's not reason not to use it. If you're building applications that need to use animation, you should be using request animation frame from now on.
- Integrating with native notifications
- Caching data with the Cache API
- Faster page loading with prefetch and preload
- Improving animation with requestAnimationFrame
- Making storage persistent on devices
- Detecting network conditions and quality
- Displaying page content in full-screen mode