FastDOM

[00:00:00]
>> 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.

[00:00:17]
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?

[00:00:36]
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.

[00:00:55]
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.

[00:01:30]
>> 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.

[00:02:11]
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.

[00:02:23]
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.