Debug Event Listener Performance with Chrome Developer Tools
In this lesson, we will use the Chrome performance panel to debug and fix an interaction that feels sluggish.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!