37
I’ve been doing a lot of research on the web and in stackoverflow communities, and I’m getting to the point of believing that Spas take almost no advantage of the GC algorithm of current browsers.
Our development team was concerned with destroying useless objects in state transitions that could be causing some memory-Leak,removing listeners, events linked to destroyed Doms and all the possibilities we found on the internet. But it still has a kind of memory-Leak on our SPA platform, which can be used for several hours continuously. The chart below represents the memory usage in 2 hours of SPA navigation :
It was a 40mb jump to 700mb in two hours. Obviously, there are actually some features like maps and graphs that justify the high memory consumption, but even returning to simpler tasks, the memory remains there for a long time until the GC comes and removes the unused memory.
There is something beyond the things I listed above that can improve GC in a single-page application?
We know that GC cannot be controlled by the client (javascript), although there are some events that trigger this condition. Some user actions such as: navigation, page exchange, window closing and tabs, among others, which in some cases do not happen in a SPA.
How can I get a satisfactory result with memory management in a SPA and I don’t have as many "triggers" for GC activation as in a multi-page application?
Very interesting question (
+1
) and which was/is the subject of much discussion on the Internet. Many of the improvements were made in the libraries, I remember that Backbone.js had many problems and then corrected them. Which library do you have this problem with? are up-to-date regarding versions? Does this problem happen in all browsers or is it specific to one or the other? what is the type of logic in the application? many instances created? upload external files? dependencies etc... all this would be interesting to know.– Sergio
@Sergio We used Angularjs, I’ve looked at the issues on their github but none that are really relevant. Other than that we have Google Maps and Amcharts. The rest we use Vanillajs(http://vanilla-js.com/) even, making it as simple as possible.
– LeonanCarvalho
Have you already analyzed dev-tools to see what memory is used and where, and what might be the biggest problem? do you have problems with all browsers? If you refresh the page the problem persists or the browser can get rid of "old memory"?
– Sergio
Exactly, we’ve had memory problems before and we’ve learned from mistakes. Today it is "under control", it takes 1 or 2 hours to realize that there are things stuck in memory, which makes debugging by dev-tools difficult, we already identify some points in third party components and report to developers. The point is that even updating the memory remains allocated, and the SPA does not seem to have enough "triggers" to activate the GC, the purpose of my question, among others, is to confirm or deny this thesis.
– LeonanCarvalho
One idea for debug is to run google Chrome with the flag
--js-flags="--expose-gc"
what makes the functionwindow.gc
that forces the Telescope to rotate. If you run and the amount of memory used remains high it is a strong indication that the problem is not the garbage collector but the application leaking memory (which may be the fault of the used libraries).– BrunoRB
Brunorb, we use this technique also, the result is that yes the memory reduces a lot. But it’s a debug function because there’s no way the average user is using it. GC in SPA follows a problem for the entire community.
– LeonanCarvalho
You guys are using
html5Mode
?– Rafael Araújo
@Rafaelbernard yes, no prefix.
– LeonanCarvalho
@Leonancarvalho this behavior is consistent in various browsers, or just with Chrome?
– OnoSendai
@Onosendai, in other browsers the perception is even more aggressive.
– LeonanCarvalho
I talk about behavior, because if I add target="_selfie"' in the links the navigation will occur as if it were an M.P.A., and does not present the problem as in the SPA, but I lose the whole advantage of a SPA.
– LeonanCarvalho
@Leonancarvalho just as sharing experiences, I had the same problem in an Angularjs application that used D3.js for rendering dendograms. In this particular case it was a Leak problem with the D3.js module that it managed canvas. The problem was resolved and a new compiled version no longer showed this behavior. I was only able to isolate the problem by partially loading the application modules, until I was able to perceive the increased consumption.
– OnoSendai
This reply https://softwareengineering.stackexchange.com/a/307497/269951 (link in English) may be of interest in the production of a canonical response.
– LeonanCarvalho
This question is very interesting. If there was a question system of the month, I would choose this one!
– Genos