Devtools Obscura: Performance 101
@hacknightly
Ugh. Typical.
Typical performance issues
TL;DR Try To Avoid
- Long-running scripts
- Repaints
- Garbage
- Reflows
- Recomposites
🙅♀️
Yeah, OK, BUT HOW?
Learn The Tools 🧠
The Performance Tab
The Legend
The legend is the same across all of the performance tools!
The Summary
Every event analyzed will have a summary of the time spent
The Timeline Overview
- Red dashes to indicate problem areas
- High level FPS/CPU usage indicators
- Network timeline indicator
- Memory usage indicator
- Helps point out immediate trouble spots
Diving Deeper
Beyond the overview
🏊🏾♀️
Network Panel
The network panel provides an interactive timeline of the network requests made during the recording.
Frames Panel
The frames panel provides a frame by frame look at the recording, allowing for detailed FPS analysis
Interactions Panel
The Interactions panel provides a timeline of interactions like clicks and hovers
Timings Panel
The timings panel provides an overview of application specific timestamps that are reported during the recording
The Main Panel
The main panel provides a breakdown of all the work happening on the main thread.
Live Demo Time
But first, questions?
deck
By hacknightly
