Menu
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.
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"
}
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?
I created a screencast to show it:
707
Monitoring Memory with the Performance Monitor tool The first thing to do is to open the Chrome Dev Tools, open the panel on the right and click on More Tools > Performance Monitor. The memory of our application is displayed in the blue graph.
To find a memory leak, look at how much RAM the system is using. The Resource Monitor in Windows can be used to accomplish this. In Windows 8.1 and Windows 10: To open the Run dialogue, press Windows+R, then type "resmon" and click OK.
The best way is using async pipe. As soon as the component is destroyed observable is automatically unsubscribed.
A memory leak is when an object in a program is still consuming memory assigned to it after the code has been read, and the object assessed. The overall significance is a degraded performance for an app.
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.
136
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.
Can you reproduce the issue outside the plunker?
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
