6

ng-include用来切换不同的数据页面,这会做大量的数据渲染。

我发现浏览器的内存使用量一直在增长,而且永远不会回落。

代码

代码非常简单。

HTML 代码:

<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>

它将显示一个“无数据”按钮和 10 个数据按钮来加载不同的页面。

角码:

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;
  })
});

和“dataN.html”页面:

<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>

“nodata.html”页面:

<div>No data yet.</div>

和“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

当我用chrome打开live demo时,初始化内存使用量小于100M。然后我点击“加载数据”按钮,它很快就会增长到300M并且永远不会回退,即使我点击“无数据”按钮加载“nodata.html”。

正常吗?ng-include有内存泄漏还是我遗漏了什么?或者内存使用情况很好,我不需要担心?

截屏

我创建了一个截屏视频来展示它:

ng-包括

4

2 回答 2

2

尝试升级到版本 1.0.5。它似乎没有这个问题。我相信这是因为当模板中有顶级空白节点时,1.0.3/4 中存在内存泄漏。

于 2013-03-09T16:01:20.760 回答
2

Stackoverflow 不是提交错误的地方。请在https://github.com/angular/angular.js/issues提交问题并在那里继续讨论。

我已将用例简化为单个文件:http ://plnkr.co/edit/Wm4YRsLGJUDqUcww2DQZ?p=preview

这是我发现的。

  1. 仅在 Windows 上泄漏,在 Mac OS X 上不泄漏
  2. 仅在 plunker 中泄漏。当我在 plunker 外面运行它时,它工作正常。

你能在 plunker 之外重现这个问题吗?

于 2013-03-12T17:11:59.397 回答