Question

我正在尝试使用ng-grid来显示高频实时数据，但我遇到了内存泄漏问题。当我使用带有ng-repeat的简单html表时，内存泄漏不存在。

我在后端使用node + express，在客户端使用angularjs。我使用socket.io将实时数据从服务器传输到客户端的表。

我在一个简化的例子中重现了内存问题：

我每秒发送1500条消息，每条消息都是这样的对象 {id：1，名称：“名称”，时间：“[当前日期/时间字符串]”} 4分钟后，浏览器内存超过400MiB，10分钟后超过1GiB

我已在Chrome和Firefox上测试过。

这是简化的例子，我做错了吗？（最后添加了附加信息）。

服务器

var app = express();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
io.of('/test').on('connection',  function (socket) {

    console.log('socket connection: /test');

    for (id=1; id<16; id++) {
        streamData(id);
    }

    function streamData(id) {
      setInterval(function () {
        socket.emit('updateData', {
            id: id, 
            name: "test"+id, 
            time: (new Date()).toString()
        });
      }, 10);
    }
});

使用angular-socket-io

服务

factory('testSocket', function(socketFactory) {
    return socketFactory({
        ioSocket:  io.connect('http://localhost/test')
    });
})

控制器

controller('NgGridTestCtrl', function ($scope, testSocket) {     
  var itemsObj = {};
  $scope.items = [];
  $scope.gridOptions = { 
      data: 'items',
      columnDefs: [{field:'id', displayName:'ID', width:'15%'}, 
                   {field:'name', displayName:'Name', width:'20%'},
                   {field:'time', displayName:'Date and Time', width:'65%'}],
      enableColumnResize: true    
  };

  testSocket.on('updateData', function(data) {
      itemsObj[data.id] = data;
      var values = [];
      angular.forEach(itemsObj, function(value, index) {
          this.push(value);
      }, values);

      // the data for ng-grid
      $scope.items = values;
  });

});

ngGrid模板

<div>
   <h1>ng-grid table</h1>
   <div class="gridStyle" ng-grid="gridOptions"></div>   
</div>

编辑添加普通表格示例

使用普通表没有内存问题，浏览器内存保持在大约155MiB

控制器

  controller('SimpleTableCtrl', function ($scope, testSocket) {
     $scope.items = {};
      testSocket.on('updateData', function(data) {
          $scope.items[data.id] = data;
      });      
  }).

普通表格模板

<div>
  <h1>Simple table with ng-repeat</h1>
  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Time</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.time}}</td>
      </tr>
    </tbody>
  </table>

其他观察

内存问题不仅与ng-grid有关;它也表现为使用“NgGridTestCtrl”控制器和带有ng-repeat的“普通表模板”。
如果数据的频率较低，则内存问题（使用ng-grid模板和NgGridTestCtrl）不会显示（在streamData函数中500毫秒而不是10毫秒间隔）。
如果数据的频率较低，则内存问题仍然存在（使用普通表模板和NgGridCtrl）（在streamData函数中500毫秒而不是10毫秒间隔）。正如人们所预料的那样，内存增长速度较慢。
当使用带有“普通表模板”的“SimpleTableCtrl”时，较高频率的数据不会导致内存问题。
我还没有能够使用更高频率数据的ng-grid。有人知道ng-grid是否可以实际使用高频数据？

Answer 1

嗨，我想首先你需要找到你的内存泄漏的位置。为此，您可以在Chrome上使用“堆分配”：

F12 - ＆gt;个人资料 - ＆gt;记录堆分配。

这里是主题：

Object allocation tracking

ng-grid和实时数据内存泄漏

1 个答案: