Browser not releasing memory

JavaScript
1

Hi,

Please take a look at the below code. The below code is small representation of a bigger system.



<html>
  <head>
    <style type="text/css">
    </style>
    <script language='Javascript'>

      
      function create()
      {
        var parentNode = document.createElement("DIV");
        var childNode = document.createElement('iframe');
        childNode.src = "http://www.google.com";
        parentNode.appendChild(childNode);
        document.getElementById('test').appendChild(parentNode);
        parentNode = null;
        childNode = null;
      }
      
      function destroy()
      {
        var allFrames = document.getElementsByTagName("iframe");
        var pNode = allFrames[0].parentNode;
        pNode.innerHTML = null;
        pNode.parentNode.removeChild(pNode);
        pNode = null;
        allFrames = null;
      }
    </script>
  </head>
  <body>																																					
  <input type='button' value='Create' onclick='create();' />
  <input type='button' value='Destroy' onclick='destroy();' />
  <div id='test'></div>

  </body>
</html>

We have an enterprise application in which I am using iframes to creates dynamic tabs within the same webpage. So we have a main application which has a menu on the left and clicking on the nodes of this menu will open new web applications as tabs on right side.

However the problem is that once the tabs/iframes are removed the browser does not release the memory. This happens both in IE8 and FireFox. So over a period of time the memory consumed by the browsers are huge because of the creation and deletion of new tabs/iframes and the application slows down.

Is there a way to make the browser release memory when an iframe is removed.

Thanks

2

Have you come across this article?
http://stackoverflow.com/questions/3785258/how-to-remove-dom-elements-without-memory-leaks

I’m not really familiar with the issue, but there seems to be a ton of articles including some workarounds on re-using the element instead of trying to delete it.

3

Hi Anthony,

Thank you for your reply. Yes I saw the article unfortunately it did not help. I tried some of the workaround I found online but none of them seems to release the memory. Initially I thought the workaround didnt work because of something we are doing in our javascript that is why I decided to develop the simple page shown above but the workaround doesnt seem to work for that either. So I am wondering if I missed anything.

I can’t think of a good way to reuse the nodes. Here are some of the reasons.

  1. The menu on the left side itself is dynamic. Each user has his own custom menu.
  2. The idea is to have tabs similar to browser tabs. A user must be able to open as many tabs as he wants and navigate between the various tabs.

So I can’t predict the maximum number of tabs that will be opened. Even if I was to count the menu during runtime and decided to restrict the number of tabs, it will still be huge drain by the browser since the menu can contain hundreds nodes for single user.

Thanks