CODEWITHSUNDEEP
javascriptajaximagememorymemory-leaks
suncat100
suncat100

Reputation: 2194

ajax website memory usage accumulation / Chrome

I have an ajax/pushstate website, which loads data(pages) through ajax. In Chrome (perhaps other browsers also), I have noticed that memory consumption accumulates when navigating pages, especially pages with lots of images. You can check the website in mention here: mjau-mjau.com

I know there is a lot of information about general javascript memory leakage and memory management, but this issue seems in most sense directly related to pages that contain a lot of images(often large ones). It is as if the image files don't get flushed from memory after their html context is replaced when navigating between pages.

Is there anything I might be overlooking? Shouldn't the browser automatically reclaim memory for html data that has been removed, including images? Could it be related to GPU layers somehow, when transitioning between pages with transform?

Suggestions are appreciated.

Upvotes: 1

Views: 307

Answers (1)

suncat100
suncat100

Reputation: 2194

I tracked down this bug, and found that it only occurs in Chrome browser. Furthermore, it seems directly related to lazy loaded images and ajax pages. Loaded images are not being removed from memory when they are removed from DOM after an ajax call. I managed to find a hack which somehow clears them from memory before DOM is updated with new data.

$('#content').find("img").off().attr('src', '').remove();

I am not sure if all the above are required, but the combo works to fair degree. The strange thing is, the memory is not reclaimed until another page with images replaces the #content DOM element. Buggy memory management in Chrome!

Upvotes: 1

Related Questions