javascript - ajax 数据 - 替换 html 与更新值属性

Question

我正在开发的一个应用程序有一个 50 行 x 100 col 网格，其中每个单元格是一个包含 1 个文本框的 div，一个外部 div 包含整个网格以处理滚动。确切的尺寸可能会有所不同，但它是典型的最大尺寸。因此，大约有 5000 个 div，每个都有自己的文本框，总共有 10,000 个元素。

网格的内容需要通过 ajax 调用来更新以加载不同时期的数据。

我的问题是，这两种方法中哪一种更有效：

1) 让 ajax 调用返回网格的完整格式 HTML，并简单地将包含 div 的 innerHtml 设置为新内容。

2）让ajax cal返回JSON或类似的，然后使用javascript/jquery循环并更新现有div中每个网格单元的值。在这种情况下可能需要添加或删除几列，但行数将保持不变。

对于较小的网格/表格，返回完整的 html 效果很好，并且只需要很少的客户端 JS 代码，但我听说在处理大量 DOM 元素时会出现性能问题。有了与每个元素相关联的大量属性和属性，我可以看到创建/销毁 1000 个元素可能会增加大量开销。所以，我想在决定采取哪种方式之前，我会在这里寻求建议。谢谢。

Answer 1

我也经历过同样的情况。对于具有一定大小和复杂性的表，一遍又一遍地渲染预生成的 HTML 比寻找和更新数据要快得多，但最终会遇到服务器通信延迟。

这里的关键是“操纵”。如果您只是在绘制网格，则在时间方面并不是很昂贵，除非有很多事件在完成时触发，例如事件绑定等。即使那些也不算太糟糕。在某些时候，回报会递减，并且单个单元格更新变得更容易接受。

这实际上取决于用户对网格的操作。如果他们正在更新许多行/单元格，您可能需要一个批量更新功能来一次将更改应用于多个选定的行，这样他们就不必等待每个单独的单元格更改刷新。这是我们针对大型表格的解决方案，因为在进行大量更改时单个单元格更新过于耗时，并且如果您每批更新仅执行一次，则从服务器重新加载整个表格并不算太糟糕。