CODEWITHSUNDEEP
memory-leaksangularjs
Freewind
Freewind

Reputation: 198228

Does ng-include have memory-leak?

I use ng-include to switch different data pages which will do a lot of data rendering.

I found the memory usage of the browser keeps growing, and never fall back.

code

The code is quite simple.

HTML code:

<body ng-controller="MainCtrl">
  <div>
    <button ng-click="url='nodata.html'">No data</button>
    <button ng-repeat="i in getNumArray(10)" ng-click="loadData(i)">Load data {{i}}</button>
  </div>
  <hr/>
  [{{url}}]
  <div ng-include="url"></div>
</body>

It will show a "no data" button, and 10 data buttons to load different pages.

The angular code:

app.controller('MainCtrl', function($scope) {
  $scope.url = "nodata.html";
  $scope.loadData = function(n) {
    $scope.url = "data" + n + ".html";
  }

  $scope.getNumArray = function(n) {
    var arr = [];
    for(var i =0;i<n;i++) {
      arr.push(i);
    }
    return arr;
  }
});

app.controller('DataCtrl', function($scope, $http){
  $http.get('data.json').success(function(data){
      $scope.data = data;
  })
});

And the "dataN.html" pages:

<div ng-controller="DataCtrl">
  <table ng-repeat="x in getNumArray(500)">
    <tbody>
      <tr>
        <td>{{data["key0"]}}</td>
        <td>{{data["key1"]}}</td>
        <td>{{data["key2"]}}</td>
        <td>{{data["key3"]}}</td>
        <td>{{data["key4"]}}</td>
        <td>{{data["key5"]}}</td>
        <td>{{data["key6"]}}</td>
        <td>{{data["key7"]}}</td>
        <td>{{data["key8"]}}</td>
        <td>{{data["key9"]}}</td>
      </tr>
    </tbody>
  </table>
</div>

The "nodata.html" page:

<div>No data yet.</div>

And the "data.json":

{
  "key0": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
  "key1": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
  "key2": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
  "key3": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
  "key4": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
  "key5": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
  "key6": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
  "key7": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
  "key8": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f",
  "key9": "sdf sdf sdf sdf sdf sdf sdf sdf sdf sd fds fds fsd fds fds fds fds fsd fds fds f"
}

Here is a live demo:

http://plnkr.co/edit/KGZVXIBws1kthgN2bxEJ?p=preview

When I open the live demo with chrome, the initialize memory usage is less than 100M. Then I click the "Load data" buttons, it will soon grow to 300M and never fall back, even if I click "No data" button to load the "nodata.html".

Is it normal? Does the ng-include have memory leak or do I missing anything? Or the memory usage is just fine that I don't need to worry about it?

screencast

I created a screencast to show it:

ng-include

Upvotes: 6

Views: 2056

Answers (2)

Misko Hevery
Misko Hevery

Reputation: 47946

Stackoverflow is not the place to file a bugs. Please file the issue at https://github.com/angular/angular.js/issues and continue the discussion there.

I have simplified the use case into single file: http://plnkr.co/edit/Wm4YRsLGJUDqUcww2DQZ?p=preview

Here is what I found out.

  1. Only leaks on Windows, does not leak on Mac OS X
  2. Only leaks in plunker. When I run it outside the plunker it works fine.

Can you reproduce the issue outside the plunker?

Upvotes: 2

Pete BD
Pete BD

Reputation: 10161

Try upgrading to version 1.0.5. It doesn't appear to have this problem. I believe it is because there was a memory leak in 1.0.3/4 when there were top level white-space nodes in templates.

Upvotes: 2

Related Questions