I'm fighting a leak on a page, which makes large AJAX requests and replaces page content once in several seconds.
If I open the page in Chrome Dev Tools, I see that memory usage grows over time (from one memory snapshot to another). There are no explicit leaks on the page (the three-snapshot technique shows there are none)
According to Google Dev tools, the memory accumulated under GC Roots -> "Global handles", in some map. As I said, closing Chrome Dev Tools result in disappearing of this memory (i.e. memory usage drops from 600+Mb to 40Mb for the page). At the same time, pressing "GC" does not help, the memory remains in place.
But if the page is remained open for several hours, it may eat gigabytes and become unresponsive.
Google Chrome version is Version 60.0.3112.90 (Official Build) (64-bit) on MacOS 10.12.6.
Any hint on how to fix/avoid such memory bloat is appreciated.
Related
What exactly is 'Google Chrome Helper (GPU)', and (aside from having two chrome instances open with ~15 tabs in each), is there anything I can do to reduce its memory use? Is its (high) memory use affected by me not having a dedicated GPU?
What exactly is 'Google Chrome Helper (GPU)'
It could be a chrome tab, extension, process, or a subframe.
and (aside from having two chrome instances open with ~15 tabs in each), is there anything I can do to reduce its memory use?
close tabs and use a single instance of chrome
Is its (high) memory use affected by me not having a dedicated GPU?
nope
Answer to followup question about determining the cost of specific helpers:
Open Chrome Task Manager via Shift + Esc and look for tasks that are consuming high memory.
I've got a memory problem in my application. Symptoms are weird: js heap stays stable at around 30 mb, while memory footprint of a browser tab is growing over time out of bounds and eventually crashes entire mac os (I'm looking at memory footprint numbers provided by chrome's task manager). It takes several hours and I can reproduce it consistently. As heap review doesn't give me any clues at all, I'd like to examine the memory allocations for the browser tab, where my application is running. Does chrome provide any tools for that?
I am using Chrome to run a page and it runs fine for hours on end, I can attest that no memory problems rise up when it's running by itself. Whenever I use DevTools to debug something, however, the tab's memory footprint only keeps increasing and increasing (as if there was a memory leak) to the point it just crashes when it reaches the point where Chrome kills a tab due to memory limit.
Some things I could figure out were that it happens if and only if DevTools panel is open (regardless of any options?), and it happens on pretty much any website (websites that load more stuff to memory tend to bloat faster). I also found out that, if the DevTools tab is closed, the memory usage sharply drops to normal usage (something like from 900mb to 200mb, which is what it would be without DevTools), and reopening makes the tab start to bloat again from scratch. I tried running the garbage collector forcibly on Performance tab, but it also didn't do anything. I don't know what causes this, but I also couldn't find anything that refers to this issue.
Any help in this matter is appreciated.
In order to check our web application for memory leaks, I run a machine which does the following:
it runs automated End-to-End tests over (almost) the entire application in Chrome
after each block of tests, it goes to a state of the web application where almost nothing happens
it triggers gc(); for garbage collection
it saves totalJSHeapSize, and usedJSHeapSize to a file
it plots out the results for each test run to a graph
That way, we can see how much the memory increases and which are the problematic parts of our application: At some point the memory increases, at some point it decreases.
Till yesterday, it looked like this:
Bright red (upper line): totalJSHeapSize, light red (lower line): usedJSHeapSize
Yesterday, I updated Chrome to version 69. And now the chart looks quite different:
The start and end amount of memory used (usedJSHeapSize) is almost the same. But as you can clearly see, the way it changes over the course of the test (ca. 1,5h) is quite different.
My questions are now:
Is this a change in reality or in measurement? I.e. did Chrome change its memory handling? Or just the way it puts out memory values via totalJSHeapSize, and usedJSHeapSize?
Concerning memory leaks, is it good news or bad news for me? Like: Before I had dozens of spots where memory increases, now I have just three. Is this true? Or are the memory leaks in the now flat areas still there and hidden?
I'm also thankful for any background information on how Chrome changed its memory measurement.
Some additional info:
The VM runs under KUbuntu 18.04
It's a single web page application done with AngularJS 1.6
The outcome of the memory measurement is quite stable - both before and after the update of Chrome
EDIT:
It seems this was a bug of Chrome version 69. At least, with an update to Chrome 70, this strange behavior is gone and everything looks almost as before.
I don't think you should be worry about it. This can happen due to the memory manager used inside the chrome. You didn't mentioned the version of your first memory graph, possibility that the memory manager used between these two version is different. Chrome was using the TCMalloc which take the large chunk of memory from the OS and manage it, once the memory shortage happenned with TCMalloc then it ask again a big chunk of memory from OS and start managing it. So the later graph what you are seeing have less up and downs (but bigger then previous one) due to that. Hope it answered your query.
As you mentioned that
The outcome of the memory measurement is quite stable - both before and after the update of Chrome
You don't need to really worry about it, the way previously chrome was allocating memory and how it does with new version is different(possible different memory manager) that's it.
How can I record memory leaks in Google Chrome similar to what is being performed in the link bewow?
https://github.com/driftyco/ionic/issues/1096
I have an Ionic app that runs embedded video, after clicking back and forth for over 10 pages during intense clicking it crashes. The pages viewed are embedded mp4s, I suspect there is some memory leakage as listed in the link above? Just need to find a way to test it
Following the post below from Ant, here is the memory log from Google Canary
http://i.imgur.com/QrwTNwe.jpg. Do the nodes and listeners look unusual?
Get chrome canary then open developer tools and click on profiles.
Using the tools there you can take heap snapshots and compare memory allocations between snapshots to see what is staying in memory or you can record heap allocations which records memory allocation in real time on a timeline so you can dig in and find where memory is not being released.
https://developer.chrome.com/devtools/docs/javascript-memory-profiling
There are some very good guides on the technicalities of doing the above if you google how to find memory leaks.