向DOM注入新代码的最有效方法是什么？

Question

我正在与我的项目的服务器端开发人员(我是前端人员)围绕向DOM注入新的东西展开了一场小辩论。他认为注入大量代码(通过ajax接收)的最佳方法是发送一个JSON对象，然后遍历该对象的每一项。他说，这将节省一些带宽，并且对服务器更友好。

显然(至少对我来说:-) )，这意味着在客户端占用了大量的cpu周期。

数据基本上是一个有20-30行(每行2-3行)的表，这意味着很少(无用的)迭代。

另一方面，我认为最好的方法是发送纯XHTML (服务器生成的源代码)并将其注入到位。这意味着只有一个cpu周期($('selector').html(data)，其中data是通过AJAX接收的数据)，但也意味着大量臃肿的HTML代码。

我使用jQuery (但我认为这并不太重要)。

你们觉得怎么样，伙计们？谢谢!

Answer 1

尽管一开始我通常发送HTML在特定位置插入，但现在我倾向于尽可能使用JSON，否则使用XML，这主要是因为我可以修改页面的许多位置，并且使用很少的信息进行更动态的操作。

此外，与XML相比，JSON占用的空间更小，而且通常也是更好的“人类可解析性”。XMl最大的优点是它已经存在很长一段时间了，并且是标准，所以您可以使用工具和知识渊博的员工来处理它。另一方面，JSON则有点晦涩难懂。当然，任何有价值的开发人员都能比我写这篇文章更快地学会它。想一想：

• 它使用javascript语法，
• 使用与XML相同的概念。

关于发送HTML Quirksmode会这样说：

如果HTML代码段包含表单，或者如果接收的HTML元素是表单，则此方法在资源管理器中会出现可怕的错误。

(...)

我将仔细研究JSON，并可能将其用于我心目中的无限制访问应用程序。尽管如此，我觉得XML仍然是目前最好的整体格式，主要是因为人们已经习惯了它。

此外，HTML代码段可能会变得相当复杂(...)因此，生成HTML的服务器端脚本可能会变得非常复杂。

此外，通过只发送HTML，你只能粘贴信息，你不会得到信息，你会得到片段，所以你不能操作它。请记住，AJAX的优势在于拥有动态页面，而不是包含某些部分的页面，这些页面无需重新加载整个页面即可更新。你可以为此使用它，这是可以的，也是一个有效的用途，但你没有充分利用它的潜力。

即使插入超文本标记语言可能比dom操作更快，我也不认为会有那么多(除了IE6可能会遇到的问题)。你应该测试一下，看看是否可以使用，这确实是性能的瓶颈。

我倾向于同意previous link的结束语。

虽然我很想说其中一个是“最好的”，但我认为选择正确的格式取决于环境，而不是任何理论上的思考。

Answer 2

$('selector').html(data)不是一个cpu周期，而是一个方法调用。浏览器必须处理所有的HTML。

唯一的方法是测试这两种方法，并确定您对客户端响应时间与服务器负载的关心程度。从你的描述来看，这两种方式可能都没有太大的区别。我怀疑你会想要优化第三个因素:开发人员的舒适度。做任何最有意义且易于维护的操作。

Answer 3

这取决于返回的数据，在我所处的大多数情况下。如果服务器回复的是表单或一般内容，我更喜欢直接使用XHTML。

但是，如果我需要接收实际的数据，我更喜欢JSON格式。是的，我必须在客户端生成标记，但是因为一切都组织在JSON数组中，所以我可以根据需要进行挑选和过滤。这也让我可以轻松地在以后更改数据视图，而不必让我们的后端人员参与进来(他的待办事项列表总是有4-5天长！)