The JavaScript engine, performance and memory
You examine how the engine compiles and optimises code, the garbage collector and memory leaks with profiling tools, and speed things up by measuring.
Level 501 · 13 lessons · 12 practice labs
Lessons
Inside the engine
- Parsing, interpretation and JIT compilation
- Hidden classes and inline caches
- Deoptimisation
- Short task: write a micro-benchmark that doesn’t lie
Memory
- Garbage collection and generations
- Reading a heap snapshot
- Common leaks: listeners, closures and caches
- Short task: find the leak in a single-page app
Speed
- CPU profiles and flame graphs
- Long tasks and interaction delay
- Splitting work and yielding to the browser
- When to reach for WebAssembly
- Capstone: speed up a slow app by measuring
Practice labs
- Fix a misleading measurement: Re-measure a function declared "fast" from a single Date.now reading using warm-up runs and repetitions.
- Fix object shapes to speed up a loop: Speed up a loop slowed by objects whose fields are added in different orders by fixing the object shape.
- Trace a deoptimisation: Catch a hot function's deoptimisation caused by occasional different argument types with Node flags and fix the cause.
- Find the biggest object in a heap snapshot: Find the object taking the most space in a growing page's heap snapshot and what retains it.
- Close a listener leak: Fix memory growth caused by a modal that adds a window listener on every open and never removes it.
- Bound an unbounded cache with LRU: Rewrite a cache that keeps every search forever with an LRU limit and prove the difference with two snapshots.
- Find the hot function in a flame graph: Find the function eating the most time in the CPU profile of a slow table page.
- Break up the long task behind a filter click: Split the long task that freezes the page for 400 ms after the filter button is clicked and let the browser breathe.
- Stop a sort repeated every frame: Find an expensive sort redone every frame in the profile and make it run only when the data changes.
- Call a WebAssembly module from JavaScript: Load a prebuilt .wasm module and call its add function from JavaScript.
- Compare JS and WebAssembly on the same job: Time an image blur in JS and in a ready wasm build, accounting for the cost of moving data.
- Log long tasks in the field: Record long tasks in user sessions with PerformanceObserver, find the most frequent one and fix it.
About this course
You examine how the engine compiles and optimises code, the garbage collector and memory leaks with profiling tools, and speed things up by measuring.
What you will learn
- Inside the engine
- Memory
- Speed
Prerequisites
You should be experienced in the topics of the same path up to level 401.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 501; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.