Instructor: 00:00 I noticed my CPU usage was really high sitting on this page doing nothing. I thought I'd look into it. Here's what I did to debug it. If I open up the task manager, I can see that GPU's pretty high and this tab is high for some reason.
00:17 If I open up the developer tools and hit Escape, this performance monitor thing shows that the tab is like 15 percent. If you don't have the performance monitor tab, you can click these little dots here and then click on performance monitor.
00:32 Then, where I looked at was the performance tab and recording a quick snapshot shows that there's a lot going on. If I zoom into one of these and then zoom in on the events, there's this layout happening because of this SVG LDS ellipsis thing.
00:52 If I go and find that element with document.query selector and remove it, then bring back up that performance thing, CPU usage has dropped a lot. It's still a little bit, but it's a lot better. That LDS ellipsis thing is the little loading spinner that shows up at the bottom before it loads the featured stuff, the yellow green blue thing.
01:20 It's interesting that SVG will cause layouts even when it's not visible. The other thing is I learned this cool trick where you can set window.onanimationiteration to console.log. Then, it'll print out every time there's an animation.
01:38 It seems like there's like maybe three every second here. If I set that back to null, expand these things, looks like all of them have to do with this little video player. There's a buffering indicator in the middle. Then, there's another one on the right of that.
02:01 Then, there's another one on the left. I think the problem is that if I go into this BMPUI hidden class, doesn't set them display none. I think they're still animating in the background. If I set display none, then CPU usage drops down to below one percent. Now if we go back over to console, there's no more animations going on. Now, we can take our findings back to the code and fix the performance for good.