Navigating the labyrinth or How to profile your webapp on Chrome?
Submitted by Pavithra Kodmad (@pkodmad) on Sunday, 23 September 2018
If you are a web developer, you must have worked on a web app that was.. slow. It’s your job to fix it and you want to poke around the internals, see which function takes the longest amount of time and what you can optimise. So you load up your app on Chrome and open the performance profiler tab. You record a few interaction.BOOM! you are presented with a screen full of colorful visualizations! And now you go to the Chrome profiler documentation and sigh..
This talk is designed to teach you the layout of the Chrome profiling tab. We will look at all the details of information that it captures, looking at call stacks, frame times and markers. I will bring examples from my experience to show you how profiling can debug performance bottlenecks and help you make your web apps behave faster.
- Intro performance profiling in Chrome - 2 mins
- Walkthrough of the UI - 5 mins
- Basic example profile and walkthrough - 10 mins
- Examples of performance bottlenecks fixed - 20 mins
- Slow navigation like scrolling.
- Page freezing incidents
- Few more..
I’m Pavithra. I work as a Developer at Atlassian in Sydney. I specialize in Front-end Technologies and have good experience at making Production ready applications. I work on the frontend team in Jira and am part of the ongoing effort to measure and improve the UI performance.