【问题标题】:What is the most performant way to inject new code into the DOM?将新代码注入 DOM 的最高效方式是什么?
【发布时间】:2010-11-22 18:46:45
【问题描述】:

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

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

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

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

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

那么,各位,你们怎么看?谢谢!

【问题讨论】:

    标签: javascript ajax performance dom


    【解决方案1】:

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

    唯一的判断方法是测试这两种方法并确定您对客户端响应时间与服务器负载的关心程度。根据您的描述,这两种方式可能都没有太大区别。我怀疑您会想要针对第三个因素进行优化:开发人员的舒适度。选择最有意义且易于维护的方法。

    【讨论】:

    • 其实是的,这就是我想说的:一个方法调用。如果您与 js 引擎迭代整个对象的 json 内容进行比较...
    • @Ionut Saicu:是的,但是仅使用 HTML 就会失去灵活性。此外,循环遍历 JSON 数据将通过一个简短的函数来完成,这不会对客户端产生太大影响。
    • 仅仅为了性能而进行测试会掩盖一个重要的可维护性问题:JSON 可以更容易地更改表示,而无需更改后端 API 内容。如果用户体验主要是前端人员的责任,那么使用 JSON 可能更有意义。
    【解决方案2】:

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

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

    【讨论】:

      【解决方案3】:

      虽然一开始我一般发送HTML插入特定位置,现在我倾向于尽可能使用JSON,否则XML,主要是因为我可以修改页面的很多地方,并在信息少的情况下更加动态地采取行动。

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

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

      关于只发送HTML Quirksmode 说:

      如果 HTML sn-p 包含表单,或者如果接收 HTML 元素是表单,则此方法会在 Explorer 中产生可怕的错误。

      (...)

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

      此外,HTML sn-ps 可能会变得相当复杂(...)因此生成 HTML 的服务器端脚本可能会变得相当复杂。

      此外,通过仅发送 HTML,您可以粘贴信息,您将无法获取信息,您将获得 sn-ps,因此您无法操作 em> 与它。请记住,AJAX 的优势在于拥有动态页面,而不是具有无需重新加载整个页面即可更新的某些部分的页面。您可以为此使用它,并且可以,并且可以有效使用,但是您正在利用潜力。

      即使插入 HTML 可能dom 操作更快,我认为它并没有那么多(除了 IE 6 可能遇到的问题)。你应该测试一下,看看它是否真的是性能瓶颈。

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

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-10-24
        • 2022-01-19
        • 2019-01-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-08-06
        相关资源
        最近更新 更多