2

我从一位必须从事其他事情的同事那里继承了一些项目工作，并且我看到很多 JQuery 似乎做同样的事情，但是以两种不同的方式，使用.append()和.html()

在这些示例中，我们假设目标元素为空。

function foo(id, field) {
    $.get('/Project/Foo?id=' + id, function (data) {
        $(field).html(data);
    });
}

然后我看到了这个：

function bar(id, field) {
    $.get('/Project/Bar?id=' + id, function (data) {
        $(field).append(data);
    });
}

现在我知道这.append()会将 HTML 固定到字段的末尾并.html()替换指定的整个字段，但是在它的使用中性能没有差异，它们是会被调用一次以显示辅助信息并在其他地方调用时隐藏的函数。

因此，为了清理并使其美观和统一，我必须问：和之间是否有任何性能差异 ？是否有充分的理由让我选择其中之一？.append() .html()

4

3 回答 3

1

虽然比较是有争议的；他们每个人都有自己的特定目的。仍然有一个jsperf append vs html报告来揭示append() 比 html() 慢的事实。

只是一点关于 jsperf 的背景知识；jsperf 事实上被许多 JS 专家用来衡量 Javascript 的性能。

于 2013-05-07T15:13:16.427 回答
1

.append()并.html()做两件不同的事情。顾名思义，第一个是附加内容，因此您可以稍后在必要时添加更多内容。如果是.html()，它将替换元素的全部内容。

在性能方面，它也取决于。这两个示例具有相似的性能，尽管 append稍微快一些：

$("body").append($("<div>"));

$("body").html($("<div>"));

对于作为输入的字符串，html()是可比的或更快的。

但是，比较两者是没有意义的，因为它们实现了不同的目标。

于 2013-05-07T14:13:49.523 回答
1

这取决于你想做什么。.append()在元素的末尾包含一些 html 并.html()用您发送给它的内容替换整个 html。例如：

使用.append()

<div id='content'>
     <p>Some content</p>
</div>
................
$('#content').append('<p>Secondary content</p>');

结果：

<div id='content'>
     <p>Some content</p>
     <p>Secondary content</p>
</div>

使用.html()

<div id='content'>
     <p>Some content</p>
</div>
................
$('#content').append('<p>Secondary content</p>');

结果：

<div id='content'>
     <p>Secondary content</p>
</div>

但是，如果您要在空元素中插入一些特定内容，我建议您使用.html(). 这就像使用document.getElementById('content').innerHTML = "<p>Secondary content</p>". 我认为，如果您使用一种已经在 J​​avascript 语言中已经完成的方法，它可能会更快。相反，.append()它就像使用document.getElementById('content').innerHTML = document.getElementById('content').innerHTML + "<p>Secondary content</p>".

您可以在 JQuery 文档中搜索更多信息。

于 2013-05-07T14:09:10.380 回答