Performance Hands-On 14 - Anon

Back

🔍 Analyzing JavaScript Event Context Collection

✨ In this hands-on exercise, you'll analyze how JavaScript collects data about click events on a shopping website.

Launch Anon Shopping - Where we track your clicks, not your fashion sense!

⚠️ Warning: No actual products will be shipped, but your click data will be thoroughly analyzed!

🛠️ Performance Analysis Instructions:

  1. 🔧 Open Chrome DevTools (F12 or Right-click > Inspect)
  2. 📊 Switch to the Performance tab
  3. ⏺️ Click the record button (circle) at the top
  4. 👆 Click on a product item or "Add to Cart" button
  5. ⏹️ Stop the recording (square button)
  6. 🔎 Analyze the results with focus on:
    • 🧵 The "Main" section to see JavaScript execution
    • 👂 Look for the event listener functions triggered by clicks
    • 🔍 Find the data collection function in the call stack
    • ⏱️ Observe how long the event context collection takes
  7. 🔬 Examine the "CollectContext" function in the call tree
  8. 🐢 Note any performance bottlenecks in the data collection process
  9. 💡 Consider alternative data collection methods, maybe using async execution

💡 Performance Tips: