Doing the Least Amount of Work: An Intro to Runtime
summary
Demonstrates that doing the least work keeps an app interactive by building a contrived Create React App that clones a million rows list every 500ms, which triggers heavy allocation, garbage collection and visible jank (about 375 ms blocked, near 100% CPU at large sizes; down to ~60 ms with fewer items). Uses Chrome Performance, Memory, Performance Monitor and the User Timings API to pinpoint expensive clones, allocations and layout paints, and shows CSS height animating causes repaint jank while transforms avoid it.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 2:30Staying Interactive
- 5:06Identifying Performance Issues
- 6:15Performance is not prescriptive
- 14:43Using Dev Tools
- 16:15Profile Runtime Performance
- 19:01Debugging Memory Leaks
- 20:10Using the UserTiming API
- 23:51When it is not JavaScript
related talks
38mLive Coding - Optimizing a React application
34mOptimizing Performance in Large-Scale React & Node.js Applications
51mTips and tricks for optimizing your React application
47mReact, Rendering, Performance
39mPerformance issues: the usual suspects
36mReact is Killing your Performance and it's Your Fault
29mQuick Wins to Improve Your App’s Performance
02h 50mReact: Internals and Advanced Performance Patterns