Debug Event Listener Performance with Chrome Developer Tools

Instructor: [0:00] In my application, I've started to notice that my click events are feeling sluggish. I'm going to come over to the DevTools, click on the Performance tab. Start recording a new session. Click on the button. Give it a little bit of time. All right.

[0:15] I'm going to stop the recording. I can see I've got a big red bar here. That doesn't look too good. I can see I had a 2,000-millisecond frame which, again, doesn't sound very healthy. I'm going to drill down here at the call stack.

[0:33] I can see that I had my click event task. I can see two functions here were called. onParentClick took 991 milliseconds to run and onButtonClick took about 1,000 milliseconds to run. All right. If I drill down in here, what are they doing? A long task. What's this about? Over here. Long task? Something doesn't seem right here.

[1:02] Let's come back to my JavaScript file. Hold on. What's this? A long task function being executed. Long task is just going to burn the CPU for about 1,000 milliseconds. Great. All right. Let's get rid of this. Get rid of these. All right. Coming back to the profiler.

[1:28] I'm going to hit record and now come over here and click my button. Already felt so much better. All right. Now I'm going to click stop. All right. Great. I'm not seeing any big red bars up here. My frames are looking really green and healthy.

[1:43] I'm going to drill down. I think this is the click event. Let's drill down, drill down. Yep. That's the click event here. We can see that the whole event took now 16.55 milliseconds to process. That's looking a lot healthier.

[1:58] What's down here? I can drill down even further. I can see that my onParentClick function and onButtonClick function are taking a super small amount of time to process. This is looking really good.