Question

代码1：

$("#page").replaceWith(html_string)

代码2：

$("#page .title").text("Hello")

我开始使用Mustache.js，jQuery.tmpl和Coffeekup，并开始想知道在重新渲染html元素方面最佳做法是什么。

假设我有一个项目列表，例如here，我想通过模板框架用JSON更改标题/标签/图像。我应该：

用新的html字符串替换整个列表本身？
用新的html字符串替换每个列表项？
只用json值替换每个元素中的text / attributes？

我知道最后一个案例需要更多地遍历dom，但我不确定这是否比取代整个html树更能影响性能。这是如何工作的？

Answer 1

我倾向于认为你不应该销毁DOM元素只是为了立即重新创建它们。

最后一种情况并没有真正添加任何DOM遍历，但它确实多次修改DOM而不是一次。

如果您担心效果，可以随时使用detach()^[docs]方法从页面中删除元素，对其内容进行操作，然后附加。

    // reference the container
var ul = $('#myul');

    // select and detach the children
var lis = ul.children().detach();

    // do your manipulation
lis.each(function() {
    // update the text
});

    // reinsert them
ul.append(lis);

.detach()会在您操作元素及其所有处理程序/数据时保持原样。

Answer 2

jQuerytmpl模板是一个已编译的javascript函数，它应该比渲染html字符串更快。

想象一下浏览器。它首先读取所有html然后解析它。使用jquery模板，您可以更进一步，为浏览器提供已解析的对象。

像jQuery.tmpl这样的编译模板是我认为最快的方式，比任何html都快，如果编码好的话。

等待批评者！：）

Answer 3

没什么不同对于代码1：

$（“＃page”）。replaceWith（html_string）

代码2：

$（“＃page .title”）。text（“ Hello”）

对于20多个元素，哪个jQuery操作更快？

3 个答案: