Deleting DOM nodes in JavaScript to save Memory

Question

I am using Safari browser for viewing my Web Page which is rich in Javascript. I see Safari takes a lot of memory (500-900 MBs) while viewing the web page and doing various operations. I wish to know whether deleting the DOM objects created, using say, var elem = document.getElementById('Id1'); needs to be deleted for optimizing this memory utilization? If any other pointers, please suggest. Also, how can we delete this DOM object in the simplest way?

Thanks Siddharth

score 1 · Answer 1 · answered Feb 22 '11 at 16:10

One point of clarification. Your example code does not create a DOM node; it merely retrieves a reference to an existing node:

var elem = document.getElementById('Id1');

Once you have access to the element you can remove it like this:

elem.parentNode.removeChild(elem);

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

Deleting DOM nodes may be useless if you're creating memory leaks (they may not be cleared from memory).

This can happen if you connect DOM nodes & javascript objects within your code (circular references that won't be cleared by DOM and JS Garbage Collectors).

If you want to get rid of this problem:

use the tools mentionned by this answer
read a little bit on DOM/JS memory leaks if you want to avoid future leaks and recognize this anti-pattern.

edited May 23 '17 at 10:33

Community

1
1

answered Feb 22 '11 at 16:33

Brian Clozel

56,583
15
167
176

depends in which way you connect them. if it's in some variable in a function, then nothing bad will happen, but if it persists in memory, either by referencing a node in a global or in some other way which is could be accessible later, then it's a problem – vsync Oct 06 '14 at 18:18

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

The webkit inspector has a profiler utility for this kind of thing. I'm not sure if it exists in the Safari version but it's definitely in the Chrome version.

See this question/answer.

Here is a good tutorial on using the Safari Inspector utility.

edited May 23 '17 at 12:26

Community

1
1

answered Feb 22 '11 at 12:05

xzyfer

13,937
5
35
46

Thanks for the help. I am already using this kit, but I am unable to find the exact way to detect memory leaks or ways of optimizing these memory leaks. – shawnnyglum Feb 22 '11 at 12:56
You can use the profiles tab to profile the page, and use the "take heap snapshot" function in the profile to so see what elements, objects, variables are using large amounts of memory. – xzyfer Feb 22 '11 at 13:06

Deleting DOM nodes in JavaScript to save Memory

3 Answers3