I use ng-include to switch various data pages that will do a lot of data.
I found that the memory usage in the browser continues to grow and never returns.
code
The code is pretty 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.
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" page:
<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>
Page "nodata.html":
<div>No data yet.</div>
And "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 demo with chrome, the initialization memory usage is less than 100 MB. Then I click the "Download Data" buttons, it will soon grow to 300 M and never back down, even if I click the "No Data" button to download "nodata.html".
This is normal? Does ng-include a memory leak or am I not seeing anything? Or is memory usage just fine that I don't need to worry about that?
screencast
I created a screencast to show it:
