See the Critical Rendering Path in the browser

Layout Reflow in the Browser

Solving layout reflow

Solving layout thrashing by caching measured value

Solving layout thrashing with debounce

Memory allocation and garbage collection in Javascript

Save and load an app's profile session

Profiling a nodejs app from the chrome dev tools

Manage Memory and Garbage Collection in Node.js

Find DOM memory leaks in Google Chrome

Easily detect memory leak source using chrome dev tools allocation instrumentation

Trace memory allocating functions using chrome dev tools

Javascript Performance

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.

Instructor: [00:01] We are going to compare two functions. The first is buildDynamicArray, which accepts an integer n and iterates n times. In every iteration, it pushes the index into the array.

[00:13] The second function is buildPreallocatedArray, which also accepts an integer n, instantiates an array of size n and fills it with 0s. It then iterates n times and adds the index value in the correct array index. The app runs 20,000 times with n=1,000.

[00:30] I'll start the process and they will work a second apart from each other. We can see that buildDynamicArray took much longer to run. I'll run the process again and we see that the results are consistent.

[00:49] Let's head to the Performance tab and take a deeper look. I start recording and start the process again. The process is done, so I'll stop the recording. Let's focus on the build dynamic area and we could search for something called Minor GC. We can see it repeats 277 times.

[01:11] GC stands for garbage collection. Garbage collection is a periodic process that is run by the JavaScript engine. It clears the memory from objects that no longer needed. It has a bigger impact the more we allocate and delete objects in our code.

[01:26] If we focus on the buildPreallocatedArray, we see that the garbage collection repeats only 77 times. We found the difference in performance. Let's see how pre-allocation is better than dynamic.

[01:42] BuildDynamicArray creates an empty array and pushes new elements to the array. The JavaScript engine needed to extend the array and find it a consecutive place in memory. It allocated the memory needed for the bigger array, then copied the existing array to the newly allocated memory and pushed the new element to the array.

[02:02] Finally, it marked the old small array to be garbage collected. This is why we have a lot of garbage collection instances. buildPreallocatedArray, on the other hand, instantiates an array of n members. Because the array was pre-allocated, there was no need for dynamic allocation during the for loop. With that, less need of garbage collection.

[02:26] As you recall, we still had 77 garbage collection instances in the pre-allocated array. These garbage collection instances are because we did allocate the array every time we entered the function and released it when the function was done.

[02:40] To summarize, we saw memory allocation and garbage collection effects on our code's efficiency. Pre-allocation reduced memory allocation and garbage collection, which improved performance.

Course

Javascript Performance

Memory allocation and garbage collection in Javascript

Share this video with your friends