FastDOM Solution

[00:00:00]
>> Steve: So our goal was to then just give a shout out like using FastDOM to like speed up these boxes. Before we saw we had a big problem, we solved it by separating everything. What wanna do is kind of go back to our original code because, again, the problem that we're trying to solve here is, yeah, if you could separate it cool, do it, right.

[00:00:17]
But if you have one function that's being very responsible about doing all of its reading and its writing. And then you have another function and they get called after each other, what did you just do? You read a bunch, you wrote a bunch, you read a bunch, you wrote a bunch, right?

[00:00:32]
In a given function, you could totally optimize this, but across your application? It's gonna happen unless you are purposely, unless you have some kind of abstraction managing this. So we'll go back to something a little closer to our original code. So let's get rid of this, go ahead and put that back there.

[00:01:00]
Actually grab that line as well. I could keep that all on the double width as well. I just, was easier to change it like this. So here we can go ahead and we could say fastdom.measure, eventually. Give it a function to measure it.
>> Steve: And then we could schedule a write by saying fastdom.write, or mutate rather.

[00:01:52]
>> Steve: Cool, go ahead and do it. See if it works. Didn't make any mistakes which is a welcome change.
>> Steve: We'll open it up, go to performance. We're going to measure it.
>> Steve: And it will stop. And you can see like first thing I notice is there's a little, some little bumps there, right?

[00:02:18]
It's not that big spike. But the animation, yeah, we can lock up the entire thread there. With hitting a button multiple times, the simple fact that I am not hitting it 60 frames per second is helpful. But we go ahead, grab one of these here, take a look at it.

[00:02:36]
And we are definitely not thrashing the dom anymore. All right, so it's a useful way to, we have a problem we can kind of apply the solution. Cuz yeah, going and figuring out every code path that your code can take and making sure two functions aren't doing their own thing in isolation is going to be hard.

[00:02:52]
But we have an abstraction where we just record all of our measurements and then we batch all of our mutates together, we can solve this problem fairly easily.