Runtime Performance
Single page apps have a reputation for providing rich experiences, but at the cost of having to download lots of code that tend to run slowly. It may seem that this is the inevitable consequence of complexity. However, with a few adjustments, we'll be able to keep both initial and return visits loading quickly and performing as well as they can in modern JavaScript runtimes.
-
Runtime PerformanceBuild Improvements: Tree Shaking
One of the ways we can reduce our "page weight" is by applying a technique known as "tree shaking", whereby we avoid including unused code in our production assets. We'll look at:
-
Runtime PerformanceEXERCISE: Tree Shaking
Update the build configuration of our projects so that unused code is "shaken" away.
-
Runtime PerformanceBuild Improvements: Partial Evaluation
Prepack.io is a new tool from Facebook, which applies a technique called partial evaluation. Essentially, values that can be calculated or simplified ahead of time are optimized, reducing the amount of code we have to send over the wire, and the amount of work that needs to be done at runtime. We'll look at how we can make use of this tool to further reduce page weight, and the techniques to apply to benefit from Prepack as much as possible, while still having deterministic builds.
-
Runtime PerformanceEXERCISE: Partial Evaluation
Further reduce our project's page weight, time to first meaningful paint, and time to interactive by setting up Prepack in our example app.
-
Runtime PerformanceCode Improvements: A V8 Primer
A little awareness of how modern JavaScript engines work goes a long way, particularly when it comes to keeping our code in "fast mode" as much as possible. We'll briefly discuss the architecture of the V8 JS engine, touching on parts like Ignition (interpreter) and Turbofan (compiler). We'll discuss some rules you can apply, and enforce with static analysis tools to avoid expensive de-optimizations.
-
Runtime PerformanceEXERCISE: Consistent Shapes and Hot Functions
Apply some of the performance debugging and performance optimization techniques to our example app. Particularly:
- Make sure object shapes are not altered,
- Refactor any functions that are de-optimized after being made "hot".
-
Runtime PerformanceNetwork Improvements: HTTP/2
HTTP/2 (originally named HTTP/2.0) is a major revision of the HTTP network protocol. In addition to making traditional use cases addressed by HTTP/1.1 more efficient and performant, it also opens up totally new capabilities. We'll look at how we can use nginx in front of a Node.js API to reap the benefits of HTTP/2, without exposing our API to the hazard of long-running connections.