Check out a free preview of the full JavaScript Performance course

The "FastDOM" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:

FastDOM, a library for separating reading and writing to and from the DOM automatically, is a helpful abstraction that reduces the number of forced synchronized layouts.


Transcript from the "FastDOM" Lesson

>> Steve: It worked, but clearly, and now you could be smart enough, and you could be like I'm gonna have one request animation frame to rule them all. But like, in a lot of these cases, it's a lot of times useful to use an abstraction. One I really like is one called Fast Dom, like its whole job is to like figure this stuff out and make it fast.

And Fast Dom effectively, there's a few methods, but there's only two that you care about. Measure and mutate, right, which are effectively read and then write. It's a pretty small library. If you really wanted to, you could write this library yourself. Basically you call measure bunch of times, it takes all of those functions, right?

And then requests one animation frame where it plays back all of your mutates. So you can measure a bunch of times, then you can schedule all of your writes a bunch of times, and it will put together one request animation frame that will then play through all the things you want to do at once.

Which will stop all of those little yellow spikes you saw at the bottom of the flame graph. All right, so, I'm gonna give that one a shot.
>> Steve: Take it for a spin. So here I'm just going to say fastdom.measure. No, actually I say that up top. So we'll go ahead, give it an anonymous function, and we'll measure.

>> Steve: And we'll go in here, and we'll mutate.
>> Steve: Cool, let's give it a shot.
>> Steve: All right, nice and smooth.
>> Steve: Let's take a look at what we have here. Stop that.
>> Steve: Right, you see we don't have all those little spikes anymore. Schedule the animation frame, we're doing Fast Dom is making its call.

We do have to recalculate a bunch of stuff. Clearly, that's not free. We have a lot of boxes on this screen. And we go ahead and we paint, right? But you can see that we're not all of a sudden like, we don't have all those spikes from all those animation frames.

We've used the library. We've scheduled everything. We're good to go, right? So a lot of times using a tool will go a long way to solve a lot of these problems.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now