Learn techniques to write efficient JavaScript, optimize render performance, load assets faster using a CDN and split resource loading with Webpack. You'll learn how to diagnose and fix common performance problems to make your web apps more performant!
Overview
Syllabus
- Introduction to Web Performance
- Thinking About Performance
- The Importance of Measurement
- The Cost of JavaScript
- Parsing
- Reducing Parsing Times Exercise
- Reducing Parsing Times Solution
- ASTs and Initial Execution
- The Optimizing Compiler
- Deoptimization, Deleting Properties
- Deleting, Feeding Objects Exercise
- Deleting, Feeding Objects Solution
- Monomorphism, Polymorphism, and Megamorphism
- Optimizing Objects
- Hidden Classes
- Scoping and Prototypes
- Function Inlining
- JavaScript Performance Takeaways
- How Web Pages Are Built
- JavaScript and the Render Pipeline
- Layouts and Reflows
- Layouts and Reflows Exercise
- Layouts and Reflows Solution
- Layout Thrashing
- Solving for Layout Trashing
- FastDOM
- FastDOM Exercise
- FastDOM Solution
- Frameworks and Layout Thrashing
- Painting
- The Compositor Thread
- Managing Layers
- will-change
- Applying will-change with JavaScript
- will-change Exercise
- will-change Solution
- Latency and Bandwidth
- Caching
- Service Workers
- Lazy Loading
- Lazy Loading Demonstrations
- Analyzing Bundle Sizes
- Slimming Dependencies
- Lazy Loading components with React-Loadable
- Component Lazy Loading Exercise
- Component Lazy Loading Solution
- HTTP/2
- Introduction to Using Build Tools
- Paying the Babal Tax
- Useful Babel Plugins
- Prepack
- Final Thoughts
- Q&A
Taught by
Steve Kinney
