Performance Theoretical 6 - Frames

Back

🎯 Understanding Frame Performance in DevTools

DevTools provides numerous ways to analyze frames per second:

🎮 Interactive Demo: Frame Types

Click the buttons below to simulate different frame scenarios:

⚠️ Simulate Performance Issues

🔍 Frame Types in DevTools:

🔄 Difference Between Partially Presented Frames and Dropped Frames

🟡 Partially Presented Frames

A partially presented frame occurs when:

  • The browser begins rendering the frame but doesn't complete all visual updates within the time budget
  • Some visual elements update while others wait for the next frame
  • The user sees a partial update rather than no update at all
  • These appear as yellow frames in DevTools
  • Usually caused by complex layout operations that can't fully complete in time

🔴 Dropped Frames

A dropped frame happens when:

  • The browser completely misses the opportunity to render a frame
  • No visual updates occur during that frame time slot
  • Users experience "stuttering" or "jank" in animations and interactions
  • These appear as red frames in DevTools
  • Often caused by heavy JavaScript operations blocking the main thread

Both issues impact user experience, but dropped frames typically cause more noticeable performance problems than partially presented frames.

🧮 Calculating Frame Size

Frame size (or frame budget) is the time available to complete all work for a single frame. It's calculated as:

Frame time (ms) = 1000 ms ÷ FPS (frames per second)

Example:

This means at 32 FPS, you have approximately 31.3 milliseconds to complete all the work required for each frame. If processing takes longer than this budget, frames will be dropped or partially presented, resulting in visual stuttering.

The higher your target FPS, the smaller your frame budget becomes, making performance optimization more critical.

💡 Practice Exercise

Open DevTools (F12) and select the Performance tab. Start recording and interact with the animation below:

Try to identify:

  1. 📈 The frame rate during normal operation
  2. 📉 When frames drop during heavy animations
  3. 🔧 The impact of browser throttling
  4. 🛠️ The effect of CPU throttling on performance
  5. 📏 Identify layout shifts

💪 Pro Tips: