我正在处理的应用程序有一个50行x 100 col网格，其中每个单元格是一个包含1个文本框的div，其中一个外部div包含处理滚动的整个网格。确切的尺寸可以变化，但它是典型的最大尺寸。因此，这可以解决大约5000个div，每个div都有自己的文本框，总共10,000个元素。
网格的内容需要通过ajax调用来更新以加载不同时期的数据。
我的问题是，这两种方法中哪一种更有效：
1）让ajax调用返回网格的完整格式化HTML，并简单地将包含div的innerHtml设置为新内容。
2）让ajax cal返回JSON或类似，然后使用javascript / jquery循环并更新现有div中每个网格单元的值。在这种情况下，可能需要添加或删除几列，但行数将保持不变。
对于较小的网格/表格，返回完整的html工作得很好，并且需要很少的客户端JS代码，但我在操作大量DOM元素时听说过性能问题。由于每个元素都有大量的属性和属性，我可以看到它可以增加很多开销来创建/销毁1000个元素。所以，在我决定采用哪种方式之前，我想我会在这里提出建议。感谢。
答案 0 :(得分：0)
我经历过同样的情况。对于具有一定大小和复杂性的表格，一遍又一遍地渲染预生成的HTML要比寻找和更新数据要快得多，但最终会遇到与服务器通信滞后的问题。
这里的关键是“操纵”。如果你只是绘制网格，那么就时间而言并不是很昂贵，除非有很多事件在完成时触发，比如事件绑定等等。即使那些也不算太糟糕。在某些时候，收益递减，单细胞更新变得更容易接受。
这实际上取决于用户对网格的处理方式。如果他们正在更新许多行/单元格，您可能需要批量更新功能，以便同时对多个选定行应用更改，这样他们就不必等待每个单独的单元格更改进行刷新。这是我们的大型表的解决方案，因为当进行大量更改时单个单元格更新太耗时并且从服务器重新加载整个表格并不是太糟糕，如果您每批更新只执行一次。