Learning Objectives 🎯
- Learn how to load and analyze performance recordings 📊
- Understand performance annotations and their meanings 🔍
- Practice identifying performance issues through annotations ⚠️
Exercise Instructions 📋
- Download the sample performance recording 💾
- Open Chrome DevTools (F12) and go to the Performance panel 🛠️
- Load the recording by clicking the "Load profile..." button 📂
- Analyze the annotations in the recording 🔬
- Try to fix the performance issues in the code below 🔧
Sample Problem 🧪
Below is a button that when clicked, performs some expensive calculations and DOM manipulations. The performance recording contains annotations highlighting the issues.
Common Annotations You Might See 💡
- Long Task ⏱️: JavaScript execution blocking the main thread for >50ms
- Layout Shift 📏: Elements moving around after initial render
- Forced Reflow 🔄: Layout calculations forced by JavaScript
- Heavy DOM Manipulation 🏗️: Excessive DOM operations