将新代码注入DOM的最高效方法是什么?

时间:2009-08-25 20:35:45

标签: javascript ajax performance dom

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

显然(对我而言,至少:-)),这意味着客户端上有很多cpu周期。

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

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

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

那么,你觉得怎么样?伙计们?谢谢!

3 个答案:

答案 0 :(得分:7)

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

唯一的方法是测试两种方法并确定您关心客户响应时间与服务器负载的关系。根据您的描述,它可能没有太大的区别。我怀疑你会想要优化第三个因素:开发人员的舒适度。做任何最有意义且易于维护的事情。

答案 1 :(得分:4)

即使一开始我通常会发送HTML插入特定的地方,现在我倾向于随时使用JSONXML否则,主要是因为我可以修改很多页面的位置,并且用很少的信息动态地动作。

此外,JSON的占用空间小于XML,通常也更好“人类可解析”。 XMl的最大优势在于它已经存在了很长时间并且是标准配置,因此您可以拥有这些工具和知识渊博的劳动力。另一方面,JSON更加模糊。当然,任何值得支付薪水的开发人员都能比我写这篇文章更快地学习它。试想一下:

  • 它有javascript语法和
  • 与XML的概念相同。

关于仅发送HTML Quirksmode说:

  

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

     

(...)

     

我将仔细研究JSON,并可能转而使用我想到的无限制访问应用程序。尽管如此,我认为XML仍然是目前最好的整体格式,主要是因为人们习惯了它。

     

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

此外,通过发送HTML,您只需粘贴信息,您将无法获取信息,您将获得摘要,因此您无法操作用它。请记住, AJAX 的优势在于拥有动态页面,而不是页面,这些页面的某些部分会在不重新加载整页的情况下进行更新。你可以使用它,并且没问题,并且是有效的用途,但你正在利用这种潜力。

即使插入HTML 可能dom操作更快,我也不认为它那么多(除了IE 6可能存在的问题)。您应该测试并查看是否适合您使用,它确实是性能瓶颈。

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

  

虽然我很乐意能够说其中一个是“最好的”,但我认为选择正确的格式取决于具体情况,而不是任何理论上的思考。

答案 2 :(得分:2)

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

但是,如果我需要接收实际的数据,我更喜欢JSON格式。是的,我必须在客户端生成标记,但由于JSON数组中的所有内容都很好,我可以根据需要选择和过滤。这也让我可以在以后轻松更改数据视图,而无需让我们的后端人员参与其中(他的待办事项列表总是4-5天!)