JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

Node.js

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

A modern web browser owned and maintained by Google.

chrome

Anything related to JavaScript performance

The Critical Rendering Path is what happens from the moment your javascript is running to the moment something changes on screen. In this lesson, we will see how to monitor and view the critical rendering path in the browser.

See the Critical Rendering Path in the browser

Layout reflow can be a performance bottleneck. Let's see how to identify it in the browser and what causes the reflow.

Layout Reflow in the Browser

Layout reflow can be a performance bottleneck. In this lesson, we will learn two ways to solve it.

Solving layout reflow

Layout thrashing is when we force the browser to measure the DOM multiple times during a synchronous process. This can have major performance consequences.  In this lesson we will see the case in which measuring a static value from the DOM can cause layout thrashing - and it can be solved by caching the value.

Solving layout thrashing by caching measured value

Layout thrashing happens when we force the browser to measure the DOM multiple times during a synchronous process. This can have major performance consequences.  In this lesson we will see the case in which measuring a dynamic value from the DOM can cause layout thrashing - and it can be solved by debouncing the measuring function.

Solving layout thrashing with debounce

In this lesson, we will learn what are memory allocation and garbage collection. We will also learn how to monitor garbage collection and its effect on performance. Finally, we will learn how you can help the JS engine run faster by pre allocating memory.

Memory allocation and garbage collection in Javascript

Monitoring an app is a powerful tool for performance and debugging.  Sometimes you'd might want to save profiles for later comparison or to share with colleagues. In this lesson, you'll see how to save a profile session to disk and load it back in chrome dev tools.

Save and load an app's profile session

In this lesson you will learn how to profile and analyze runtime performance of a nodejs app using the chrome dev tools. All you need is nodejs and chrome installed.

Profiling a nodejs app from the chrome dev tools

In this lesson, you will learn how to use view and interpret the garbage collection activity of your node.js app via the console. You will also learn how to take heapdump snapshots and analyze them with Chrome Developer Tools to identify possible memory leaks. A sample app with a known memory leak is provided as part of the walk-through to illustrate how to use the tools in your own environments.

Manage Memory and Garbage Collection in Node.js

Memory leaks are an annoying and possibly devastating for applications. In frontend Javascript, DOM elements are being added and removed from the DOM but sometimes we forget that elements are referenced inside Javascript.
This memory leak is sometimes hard to trace. In this lesson, we see how to compare memory snapshots to track down leaked DOM elements.

Find DOM memory leaks in Google Chrome

Detecting a memory leak is not always easy. Chrome dev tools allocation instrumentation is a great tool with a visualisation that helps you track down memory leaks easily.

Easily detect memory leak source using chrome dev tools allocation instrumentation

Sometimes you'd like to find out which function allocates the most memory in your application.  Chrome dev tools has two ways to do that. In this lesson, we will go over both and track down a memory leaking function.

Javascript Performance

Yonatan Kra

Course Content