Optimize Your JavaScript App's Performance

on YouTube ↗26m

" summary

A real bug in a Google UI library causes 3–4 seconds freeze when a large dropdown is removed and the author lands a PR that ends up in YouTube tests; diagnosis uses Chrome Performance tab, call tree and flame charts to find long self time JS functions and layout thrash. Fixes include measure before mutate, batching and postponing measurements to the next event-loop, a dirty‑flag so only 600 of 50,000 entities update, and micro-optimizations that shave 60–70 ms then another ~50 ms off critical paths.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 2:41The RAIL Model - User Experience Benchmarks
3. 3:57The Event Loop
4. 5:06Critical Rendering Path
5. 12:10Rendering and Layout
6. 12:31Go with the FLOW!
7. 14:09What's a forced reflow/layout?
8. 24:50Virtual Scroll

" related talks

• 01h 03mSpeed up your Web ApplicationSebastian Springer · W-JAX 2018
• 34mUnderstanding JavaScript PerformanceGodfrey Chan · EmberConf 2017
• 34mOptimizing Performance in Large-Scale React & Node.js ApplicationsTejas Gavankar, Hrithik Gavankar · DevConf.CZ 2025
• 17mVisualising Front-End Performance BottlenecksRichie McColl · React Summit 2020
• 01h 08mSquashing JavaScript BugsTodd H. Gardner · NDC Sydney 2017
• 38mLive Coding - Optimizing a React applicationJuho Vepsäläinen, Andrey Goncharov · React Finland 2020
• 48mThink Fast, First: Empowering a Performance CultureAlfredo Lopez · LibertyJS 2019
• 20mJavaScript Performance in the Browser's WorldDave Methvin · dotJS 2013