javascript - 删除和创建 VS 搜索和更新 Jquery

Question

1. 假设我有这个 HTML 模型。
2. 假设我需要定期更新信息（Value header），1s。应该对模型中的每个表都这样做。我通过 websocket 以 JSON 格式获取数据。

问题是：更新表中数据的最佳方法是什么？删除内容并创建新的 DOM 元素或搜索 DOM 元素并更新它们的值？

Answer 1

最快的方法是在 js 中保留对 DOM 元素的引用 - 使用

tableRefs[row][col]=document.createElement('td');

并保留对它的引用。然后只需通过更新

tableRefs[row][col].innerHTML='yourDataHere';

除非您计划在古老/低性能设备上运行并且您的数据大约为 100 行，否则我不会担心性能。

Answer 2

我最终通过 jquery 进行选择器访问。我更新了 HTML 模型，因为我忘了提到我可以通过类选择器轻松识别我必须更新的值。我之前有这个类选择器，但后来简化了模型以在这里提出问题。性能测试在这里完成。虽然这个答案不适用于我的情况是完全有效的。

更新值的有效代码是：

$('.values').each(function() {
  if ($(this).html() != " ") {
    $(this).text("UP1");
  }
});

您还可以将 jquery 查找范围缩小到特定表（来自 HTML 模型的示例表）：

$('#tableWrap_group_1 .values').each(function() {
  if ($(this).html() != " ") {
    $(this).text("UP1");
  }
});