Javascript 动态更新表的正确方法

我每10秒通过websocket获取一次数据，并使用此功能更新单元格：

agentStatSocket.onmessage = function (e) {
  data = JSON.parse(e.data);
  //console.log(typeof(data));

  for (var i = 0; i < data.length; i++) {
    var inboundTd = '#' + data[i]['id'] + '-inbound';
    var outboundTd = '#' + data[i]['id'] + '-outbound';

    if (data[i]['inboundCalls'] != 0) {
      $(inboundTd).html(data[i]['inboundCalls']);
    }

    if (data[i]['outboundCalls'] != 0) {
      $(outboundTd).html(data[i]['outboundCalls']);
    }
  }
};

agentStatSocket.onmessage=函数（e）{
data=JSON.parse（e.data）；
//控制台日志（数据类型）；
对于（变量i=0；i

这很好用。但是，我发现更新表时有些滞后。目前，表中只有150行。如果行数变为1000或更多，我不知道延迟是多少

我有以下问题：

设计这些数据频繁变化的表的正确方法是什么？我没有使用任何库，如react或angular。这是纯jQuery。我使用的是数据表 jQuery增强了表视图

---

附言：我只有最起码的知识让事情在前端顺利进行。请原谅，如果这不是一个好问题。

< P>一个要考虑的是，在许多情况下，访问基于ID的元素通常在香草JavaScript中比JQuery要快得多。 一个简单的例子是：

函数jsTest（）{
for（设i=0；i<1000；i++）{
document.getElementById（“js”）.innerHTML=i；
}
}
函数jqueryTest（）{
for（设i=0；i<1000；i++）{
$（“#jquery”）.html（i）；
}
}
函数启动（）{
时间（“javascript”）；
jsTest（）；
timeEnd（“javascript”）；
控制台时间（“jquery”）；
jqueryTest（）；
console.timeEnd（“jquery”）；
}
//仅用于测试目的
window.onload=启动

Javascript:
Jquery:
您可以使用handlebar js并为html创建模板。在这里使用是件好事。@AjuJohn谢谢你的建议。我会调查这件事的，投赞成票！。我不知道，但我有一个预感，车把js将是一个很好的替代品，正如@AjuJohn在评论中提到的。我又遇到了一个问题，一些表单元格没有被更新，尽管代码是正确的，并且我在websocket消息中获得了正确的数据。我不知道为什么这个代码适用于大多数单元格，但有些单元格没有更新。我刚刚交叉验证了这一点。jQuery$（…）函数被设计为多用途函数—您可以指定ID、类、标记名等—因此代码首先需要确定您引用的内容，这需要时间。javascript版本只适用于一个id，因此可以立即知道您试图以什么为目标，因此会更快。您还必须记住，一个ID是区分大小写的——“x”与“x”不同，getElementById（..）将只返回具有该ID的第一个元素，因此如果您有两个具有相同ID的元素，则不会看到第二个元素。所以，仔细检查大小写和唯一性。就连我也怀疑可能有重复的ID。所以我在控制台中执行了这个函数，我发现
没有找到重复的ID
OK-这消除了一个潜在的问题。另一个是区分大小写。我想第三种可能是源数据中的id发生了变化？或者，可能是一个没有ID的TD项目？我已经添加了您的代码，并且得到了
未捕获的TypeError:document.getElementById（…）为null
。奇怪，事情不应该这样发生。使用datatTable是否可能导致这种失真？