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

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.

Yonatan Kra: [0:00] We'll continue with the app that adds elements to the DOM and pushes them into an elements array and also removes the elements, but does not clear them from the array, and it's creating a memory leak.

[0:14] There are two ways to find out what function allocated which object. The first is allocation sampling. I select it in the Memory tab in the Chrome DevTools and start profiling.

[0:29] I'm adding some elements, then remove them. Stop the profiling, and they get to the chart view, which shows me what functions allocated memory during the app run. In this case is very simple because I have only one allocated function, but we can see it's addElement. We can click it and go and see that it actually allocated the memory when creating a new element.

[0:59] You can also view it in top-down view, so this is anonymous, which was called by the click event, and it called addElement that allocated the memory. Also, bottom-up view that shows me the allocating functions and how much memory these functions allocated.

[1:22] In this case, you can see that addElement allocated this amount of memory. Push also allocated memory, probably in order to increase the size of an array dynamically.

[1:32] The other way to do that would be to choose allocation instrumentation on timeline and make sure these record allocation stacks is ticked. I'll start profiling. Add Elements. Remove the elements.

[1:48] Now you can see the leak here with the blue bars that remained. If I focus on one of them and select one of the leaked elements, now I have the option to click on allocation stack and see the allocating function. In this case, addElement. This way, we can track down the exact function that allocated the memory and take care of memory leaks pretty quickly.

[2:15] To summarize, we have two ways of finding the allocating function of objects in memory. The first is allocation sampling, which has less performance overhead, and it's more suitable for long-running processes. For instance, if you'd like to just run your [inaudible] for a certain amount of time and watch the memory allocations.

[2:39] The second is allocation instrumentation with the record allocation stacks, which has more performance overhead, but allows you to analyze memory allocation over time.

Course

Javascript Performance

Trace memory allocating functions using chrome dev tools

Share this video with your friends