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

Question

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

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

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

我每秒发送 1500 条消息，每条消息都是一个像这样的对象{id: 1, name: “name”, time: “[当前日期/时间字符串]”}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>

补充观察

1. 内存问题不仅仅与 ng-grid 有关；它也使用带有 ng-repeat 的“普通表格模板”的“NgGridTestCtrl” Controller 。
2. 如果数据频率较低(500 毫秒而不是 streamData 函数中的 10 毫秒间隔)，内存问题不会自行显现(使用 ng-grid 模板和 NgGridTestCtrl)。
3. 如果数据频率较低(500 毫秒而不是 streamData 函数中的 10 毫秒间隔)，内存问题仍然存在(使用普通表格模板和 NgGridCtrl)。正如人们所预料的那样，内存只是以较慢的速度增长。
4. 使用带有“普通表格模板”的“SimpleTableCtrl”时，较高频率的数据不会导致内存问题。
5. 我还不能将 ng-grid 用于更高频率的数据。有人知道 ng-grid 是否真的可以处理高频数据吗？

Answer 1

您好，我认为首先您需要找到内存泄漏的位置。为此，您可以在 Chrome 中使用“堆分配”:

F12 -> 配置文件 -> 记录堆分配。

这里是主题:

Object allocation tracking