代码之家 › 专栏 › 技术社区 › IonuÈ Staicu

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

dom performance ajax javascript

IonuÈ Staicu · 技术社区 · 15 年前

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

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

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

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

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

3 回复 | 直到 15 年前

Jeremy Stein 15 年前

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

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

Community LiorH 4 年前

就像一开始我通常发送的 HTML JSON 只要我能, XML 否则,主要是因为我可以修改页面的许多位置,并在几乎没有信息的情况下更动态地进行操作。

而且 JSON 其占地面积小于 XML 而且通常也是更好的“人类可解析”。XMl最大的优点是它已经存在很长时间了,并且是标准的,因此您手头有工具和知识渊博的工作人员。另一方面,JSON则更具代表性 模糊的

(...)

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

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

粘贴信息,你不会得到信息,你会得到片段,所以你不能运转用它。记住是有不 包含某些部分的页面可以在不重新加载整个页面的情况下进行更新 可以使用它是可以的,也是有效的,但是你没有充分利用它的潜力。

即使在插入HTML时能够快于 dom 操纵,我不认为有那么多(除了IE 6可能存在的问题)。您应该测试一下,看看对于您的使用来说,这是否真的是性能的瓶颈。

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

Mark Hurd 15 年前

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

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