Javascript ng网格与实时数据内存泄漏

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

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

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

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

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

});

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

控制器

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

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

});

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

ngGrid模板

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

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

普通表格模板

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

<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重复的简单表
身份证件
名称
时间
{{item.id}
{{item.name}
{{item.time}

其他观察结果

内存问题不仅仅与ng网格有关；它还使用“NgGridTestCtrl”控制器和带有ng repeat的“普通表模板”来显示自己

如果数据的频率较低（streamData函数中的间隔为500毫秒，而不是10毫秒），内存问题不会表现出来（使用ng grid template和NgGridTestCtrl）

如果数据的频率较低（streamData函数中的间隔为500毫秒，而不是10毫秒），内存问题仍然存在（使用纯表模板和NgGridCtrl）。正如人们所预料的那样，内存只是以较慢的速度增长

使用带有“普通表格模板”的“SimpleTableCtrl”时，较高频率的数据不会导致内存问题。

我还不能使用更高频率数据的ng网格。有人知道ng grid是否可以处理高频数据吗

---

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

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

以下是主题：

---

嘿，你解决过这个问题吗？它的表现如何？@不，我现在使用的是一张普通的桌子，我没有记忆问题。你对ng电网也有同样的问题吗？我现在正在为它制作一个信号器测试线束，我会让你知道的。但是，我不确定是否可以说您的示例是内存泄漏，因为您正在以每秒1500条消息的速度加载到内存中。为什么它不会增加？但是我注意到打印gridOptions显示ng grid将数据存储在内存中3次。好奇地在这里贴了一篇关于它的文章。因此，实际上，将4500 msg/sec加载到您计算机的内存中example@parliamentng grid的问题是内存不断增长，从未达到饱和值。为了比较，我用一个普通的表显示相同的数据，这没有内存问题，内存设置为大约150MiB的值。