Throttle CPU to Identify Performance Bottlenecks

[00:00:00]
>> Steve Kinney: So we have an app, and its goal in life is many of the Pokémon, all of the Pokémon. I know better than to say that it's all of them because I live with somebody who knows a lot about Pokémon who will correct me, but I believe it's all of them. And this search is not just searching a thousand Pokémon, because that would be slow, but not that bad. It's a fuzzy search, right, which means it is willing to search the name.

[00:00:36]
I think I chose the entire description as well as the types and the species, even though it's not entirely clear how that's different. And I'm about to expose how little I know about Pokémon despite the fact that I have someone who talks my ear off about them all the time. And ideally, as I type, what it is going to do is a fuzzy search across a thousand things, across a bunch of different fields in a somewhat nested object, right?

[00:01:09]
So it is, it's not good, right. And there's a certain part where that is just going to take some time. Again, I have gone in, oh, no, we didn't at this point. Let's really make it painful, just to kind of ham it up a little bit because again, like, I know that it will not be responsive, but you will not necessarily see my fingers at the given time. So we'll go ahead and we'll start.

[00:01:39]
Now I typed in absolute gibberish, but you will see that it took a while. As I hit delete, it takes, I'm getting some noticeable lag, and you can really feel it if you actually go into the regular Chrome developer tools, hit record and say, and then I'm going to stop the recording. And the really fascinating thing you'll see in the regular tools is it really likes to yell at you when things are problematic.

[00:02:20]
So you can see my CPU usage that I'm just basically like maxing that out for long periods of time. The other thing that you can see in the regular Chrome development tools is anything that is like, Chrome would like to shame you for, it puts a little red flag on, which is like, that took too long. And if the goal is to accomplish things in under 16.6 milliseconds, you can see that I did not hit that goal, right, in this case, because like the act of some of those events, right, took in some cases a second, which is more than 60 frames a second for those keeping track at home.

[00:03:13]
So my app is bad. Now you can argue, well, you're going through a thousand, is it a thousand, 1,041 Pokémon and you're doing a fuzzy search and I have throttled the computer a little bit for dramatic effect, but not too much. And so yeah, well, like sometimes that happens, like deal with it, but like the real chaotic problem is I can lift my hand up, you can see it before my actual keystroke is registered on the screen.

[00:03:47]
That's not great. I can't necessarily make the search. I could probably optimize the search too, but like, what would be great is if like we could both like show the user's like interaction, like, so it feels snappy and even maybe show an indicator like we are working on that effect, because sometimes even like showing a loading indicator is better than nothing. Right? Nothing is bad, right.

[00:04:16]
So what we want to do is figure those things out, and we have the tools, because again, the whole value prop of React Fiber is just because it started doing a thing, doesn't mean that when new stuff happens, because one, if another character gets hit, I don't actually want to search anymore, right? And two, like, I still want to take that hitting, that pressing of the character as a like high priority item, which is like, hey, show me that happening first and foremost, and then like whatever you need to do in the background to like filter the list, make that true as well.