Table of Contents
Introduction to Web PerformanceSteve Kinney introduces himself and gives an overview of why performance is essential in modern web applications.
The Importance of MeasurementBefore beginning to improve performance, Steve mentions the need to determine whether or not there is a performance problem. Steve introduces his Golden Rules of web performance.
ParsingBefore code can be executed, it has to be read. V8 parses code in two steps. This is a good thing, but can have some negative implications if we're not careful.
Reducing Parsing Times ExerciseWhile Optimize, which is JS file that tries to use a heuristic to reduce parsing times, is great tool for impacting performance, it's effectiveness varies across libraries and browsers. In this exercise, students set up and test Opitmize in with different browsers and JS libraries.
Reducing Parsing Times SolutionSteve walks through the Solution to Reducing Parsing Times Exercise underscoring the importance of measuring the impact of a tool before adding it to the build process.
ASTs and Initial ExecutionOnce the code has been parsed, an abstract syntax tree is created. The AST is a representation of our code that can be turned into byte code by the baseline compiler.
The Optimizing CompilerSteve benchmarks a small addition function and then uses V8's internal flags to trace the work done by the optimizing compiler to make it fast.
Deoptimization, Deleting PropertiesThe optimizing compiler optimizes for what it’s seen. If it sees something new, that’s problematic. Steve traces deoptimization in the example from earlier. Deleting properties has some strange implications on performance. Steve takes questions from students.
Deleting, Feeding Objects ExerciseIn this exercise, students delete properties to determine an impact on performance.
Deleting, Feeding Objects SolutionSteve walks through the Solution to Deleting, Feeding Objects Exercise.
Optimizing ObjectsSteve experiments by feeding similar objects to a function as well as then again with sending different types of objects to the same function and measuring the performance implications.
Hidden ClassesSteve compares objects created in different ways to see if they have the same hidden class.
Scoping and PrototypesScoping can have dramatic implications on the performance of our code. Steve investigates with the curious case of a constructor class inside of a function. He compares the hidden classes of objects that were created by what looks like the same constructor.
Function InliningSteve states that the code we write is not always the code that is executed. Hot functions can be re-written by the compiler to be more performant, and there isn't anything we need to do.
Layouts and ReflowsSteve illustrates that changing the elements on the page can cause the browser to recalculate the position of all of the objects on the page. This technique is an expensive operation and should be done as much as necessary, but as little as possible.
Layouts and Reflows ExerciseIn this exercise, students examine how changing elements in a web page create additional render time within a browser.
Layouts and Reflows SolutionSteve walks through the Solution to Layouts and Reflows Exercise.
Solving for Layout TrashingSteve looks at another Layout Thrashing example before exploring strategies for reducing unnecessary reflows of the page.
FastDOMFastDOM, a library for separating reading and writing to and from the DOM automatically, is a helpful abstraction that reduces the number of forced synchronized layouts.
FastDOM ExerciseIn this exercise, students work with FastDOM.
FastDOM SolutionSteve walks through the Solution to the FastDOM Exercise.
Frameworks and Layout ThrashingWhile frameworks are incredibly helpful for implementing performant patterns, they come with overhead that needs to be considered.
PaintingOnce the page has been laid out, elements in the Render Tree must be turned into images that can be displayed on the screen. While not all changes will cause a reflow, but most will trigger a repaint.
The Compositor ThreadThe compositor thread is a thread in the browser that leverages the GPU to create the final version of the page seen on the screen.
Managing LayersThe compositor thread manages layers. One can make our applications perform better by having the compositor thread take care of moving objects around as opposed to the main thread, which has many other responsibilities.
will-changeThe will-change property is a hint to the browser that something might happen to an element soon, which would make it worthy of its layer. The browser can choose to take this hint and promote it to its thread in anticipation.
will-change ExerciseIn this exercise, students work on an element, which is currently the cause of a paint storm, and refactor it to use layers.
will-change SolutionSteve walks through the Solution to the will-change Exercise. Steve takes questions from students.
Latency and BandwidthWhere assets are located can have an important impact on the time it takes for web pages to load. Using a CDN can solve this by distributing assets around the world.
CachingThe browser will not ask for assets that it believes it already has recent versions of. Caching headers can be set in HTTP responses that let the browser know what it should and should not cache.
Service WorkersService Worker is a new web technology that allows us to programmatically control caches and network requests without relying on HTTP headers.
Lazy LoadingSteve introduces Lazy Loading. Lazy Loading is a technique to delay initialization of an object until the point at which it is needed.
Lazy Loading DemonstrationsSteve takes a tour of a demonstration application called "Noted" and showcases how to optimize with lazy loading components as needed.
Analyzing Bundle SizesWebpack's bundle analyzer can be used for visualizing the size and contents of the bundles it produces.
Slimming DependenciesSteve states that not every part of a library is needs to be included in applications. In some cases, picking out only the parts needed is possible. Steve selects the one method he needs from Lodash and then re-evaluates the size of the application's bundle.
Lazy Loading components with React-LoadableReact-Loadable is an abstraction that dynamically lazy-loads react components and renders a loading component.
Component Lazy Loading ExerciseIn this exercise, students need to work on coding the markdown component to be loaded dynamically—further reducing the size of the initial bundle.
Component Lazy Loading SolutionSteve walks through the Solution to the Component Lazy-Loading Exercise.
HTTP/2HTTP/2 is a significant update to the transport protocol that gets web pages to browsers. It also invalidates some performance advice that was once standard in the industry.
Introduction to Using Build ToolsBuild tools can help automate best practices for delivering performant web applications.
Useful Babel PluginsSteve reviews some Babel plugins that help implement some of the best practices with little to no additional work.