Javascript memory leak when navigating - javascript

I'm experiencing a huge memory increase when I'm doing a duration test with navigation between our webpages in our webapplication.
It's not a single-page-application, so I'm navigating with:
window.location.href = "linkToOtherPage.html";
This should clear all used memory right? What I notice in Chrome, is that then type=renderer process (the tab in Chrome) claims way too much memory. When navigating once each 2 seconds, it will eat 1000MB overnight. (Starts at 30MB).
Analyzing the js heap will result in a size of 4-5MB, so it's not in the JS-heap.
Is it so that a memory-leak caused in JS/DOM will keep on living till you close the browser? I would've thought it would be cleared when you navigate to another page.

I didn't quite understand the situation but maybe this is useful:
window.location.href actually loads the page from the cache and maybe if you are referring to the same page over and over again and if the audio src is going to be changed through ajax request maybe you are having all the data saved to the cache?! window.location.reload(true) actually does the trick on getting the data again all from the server.
I'm not sure if I helped you in any way. But if not, sorry for the disappointment! ;D

Related

Images (and css) randomly fails to load with no apparent reason

I have a simple Flask+SQLite app that lives on Digital Ocean droplet and is served by uWSGI (I'll add NGINX when I this issue is solved).
Every time that I load a page, some images fail to load the first time. It's totally random which images and when they fail to load. To overcome this issue, I've made a reloader function that detects the failed images and reload them until they're loaded.
That produces network log like this one:
You can see that for example, icon_order_history.svg failed to load twice, and then successfully loaded the third time.
It's actually all fine if images don't load, I don't really mind it that much, but sometimes css fails to load and results in a situation like this one:
I don't know what could cause this, I don't think it's a bad internet connection since it also happens on localhost.
Here's the reloader function:
function imageRetry(e) {
setTimeout(reloadImg, 1000, e);
}
function reloadImg(e) {
var source = e.src;
e.src = source;
}
Any help is welcome, also feel free to ask me any questions/request more info.
TIA
After not being able to solve the issue for a couple of days. I've decided to redeploy everything using a slightly different method.
That solved the issue but the reason behind slow/random load fails stays unknown.

Detect resource that hangs while loading with javascript

I have a bunch of functions that need to be called on $(window).on('load' ...). Occasionally, the site hangs indefinitely while loading. There are a bunch of embeds and other pieces of media being pulled in from various APIs.
Is it possible to detect what is still pending without attaching an event listener to every resource?
Edit for clarification:
#PamBlam's comment below was more tuned in to the problem -- I want to be able to do this with javascript, so it could happen client side while my users are browsing.
Specifically, I'd like to be able to identify pending requests and get any relevant details, and send a note to an error logger (such as sentry) to see what specific resources are problems for users on the live site. Perhaps the only solution would be to create a new loadResource function (as suggested in some answers) that compiles these details and, after a long timeout, sends a note to the logger if it still hasn't finished. But, this seems like overkill. Also some of these resources are <iframe>s that are included in the HTML, so more work to add that in.
What I was hoping for - and I'm guessing that this doesn't exist, as I assume javascript doesn't have permission to see what's happening on the browser level - was something that could, after a long time out, essentially look at the Network tab of dev tools and send a report of what is still pending.
One of the best ways to debug JavaScript is Chrome DevTools(while I am a big advocate of Firefox, in this case Chrome is just mind blowing). Use debug breakpoints and network to the best of your capabilities.
Appending the link for referral
https://developers.google.com/web/tools/chrome-devtools/
Count how many resources are loading, and decrement the count when each is finished. When the count is zero all resources are done.
var resourcesPending = 0;
// Load some resources
resourcesPending++;
loadAResource(function(){
resourcesPending--;
if(!resourcesPending) allResourcesLoaded();
});
resourcesPending++;
loadAResource(function(){
resourcesPending--;
if(!resourcesPending) allResourcesLoaded();
});
// etc..

Browser crashes on heavy single page pplication

We have a big single page application, that started to crash from time to time. We were trying to debug it for a while now, but unfortunately, still no results. We used traditional debugging tools, but they were not very useful - perhaps not used correctly.
The app seems to crash most often on Safari, it doesn't crash that often in Chrome, but it still does, so I can't rule out a problem with browser(s).
I have managed to get this crash report, which you can find at the end of this question, unfortunately I don't know what to look for in it. I know it's huge and I'm just throwing it at you saying "here, find a bug", but could you possibly have a look at it and give me some hint what might be wrong or what should I focus on in the report?
Here is the crash report http://pastebin.com/bNxpuS6T
Thanks
What I can see from the crash report and the source code is that your JavaScript code was trying to destroy some DOM objects while still iterating through those, which is the reason of the crash.
I guess you may want to check if any timer associated with the idle tabs is still active.
DETAILS:
The WebKit crashed at
1 com.apple.WebCore 0x00007fff83cace2d WebCore::ScriptExecutionContext::willDestroyActiveDOMObject(WebCore::ActiveDOMObject*) + 45
where the source code is (click here)
void ScriptExecutionContext::willDestroyActiveDOMObject(ActiveDOMObject* object)
{
ASSERT(object);
if (m_iteratingActiveDOMObjects)
CRASH();
m_activeDOMObjects.remove(object);
}

Save and load entire web page state (Visual HTML, And javascript Variables)

So lately I've been working on this project, which will end at the end of January (end of this week).
http://www.nikollr3.three.axc.nl/ (this is a preview of the program a few months ago, but u get an idea)
We have started testing the website and noticed that it was sometimes making Firefox crash.. since Firefox' error or crash reports were never of any use (no useful information found), I have no idea how to fix this error. And a possible solution would be to have a save / load button on the web page, which can save or load a state (and for example autosave state untill it crashes) then when it crashes you would be able to reload the last state and continue working on the project. By saving a 'state' I mean recreating the EXACT moment as to when the save button was clicked, thus same javascript variable values and same HTML looks.
I have found little things about this on the internet, the only one relevant being for android phones,.. Any ideas or implementations?
write all your variables and "HTML looks" (attributs) to a XML-file. load (if (exist(XML)pseudo-code) all necessary data onPageLoad

jquery script is using to much memory

I have the code below on a social network site, it loads a file that shows users new notification messages if they exist.
Problem is when I leave the page open for a while, it eventually consumes too much memory on my PC and starts to make firefox non-responsive and throws an error message saying that memory is getting low and asking if I should abort the script or something along those line.
Is there a way to do what I have it doing but without using up so much memory over time?
<script type='text/javascript'>
$(document).ready(function(){
var updatenotification = function(){
$('#notificationcontainer')
.load('http://localhost/member/beta_new/notifications.inc.php')
.fadeIn("slow");
};
var auto_refresh = setInterval(function(){updatenotification();}, 60000);
updatenotification();
});
</script>
What exactly do you return. I'll assume it is a large ish dom fragment. You could change the code to just return a small json string, check if there is a valid new notification and then write some markup into the div rather than reloading it each time regardless if there are new notifications. Can you maybe show the markup that you are returning.
I am making a few too many assumptions without knowing exactly what your returning. If it is just a tiny html fragement I cant really see the issue. The script looks ok and should not be causing the issues you speak about.
Also remember that firebug does have big issues at the moment. There are some pretty nasty leaky bugs that cause the memory warning dialog when browsing heavyish ajax/js sites like StackOverflow, Netvibes. Your average user (I assume!) will not have firebug so will not see anything

Categories