Visualising Front-End Performance Bottlenecks
summary
Measures slow JavaScript using the browser user timings API and Chrome DevTools performance panel, instrumenting with window.performance.mark/measure to get a baseline. A demo reveals 102 DOM nodes and an interaction cost of about ~550 ms baseline after removing 58 ms of instrumentation overhead. Fix uses virtualization/windowing to render only visible items, reducing main-thread layout/paint work and removing jank on low‑end TV devices.
AI-written summary · about
chapters (30)
- 0:00Introduction
- 0:53Who am I
- 1:08The Zone
- 1:27Living Room Devices
- 1:40Smart TVs
- 1:52Performance problems
- 2:20What customers prefer
- 2:39Useful quotes
- 3:06Agenda
- 3:35Measure Analysis Cycle
- 4:01Demo
- 4:39Profile
- 5:05Main Thread
- 5:27Anatomy of a Frame
- 6:24How We Measure
- 6:39Why Measure
- 7:38Mark
- 7:58Interaction
- 8:39Instrumentation Code
- 8:56Custom Hook
- 9:25Copy Paste
- 9:35Reload Demo
- 10:04Baseline
- 11:04Element
- 11:49Virtualization
- 12:48Lazy Loading
- 13:40Horizontal Example
- 14:06TV Constraints
- 14:39Browsers
- 14:51No developer tools
related talks
59mProfiling JavaScript Like A Pro
34mUnderstanding JavaScript Performance
30mPerformance Tuning Secrets
01h 02mWeb Performance Tuning with browser APIs
49mEffortless Performance Debugging
55mI Feel the Need for Web Page Speed
29mHands on performance debugging with the browser in devtools
20mReal metrics for front-end performance