jquery - .html() 和 .append() 哪个更快？

Question

我从一位同事那里继承了一些项目工作，这些项​​目工作必须处理其他事情，并且我看到很多 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() <强>？我有充分的理由选择其中之一吗？

Answer 1

.append() 和 .html() 执行两种不同的操作。第一个，顾名思义， append 内容，因此您可以在以后根据需要添加更多内容。如果是 .html()，它将替换元素的全部内容。

就性能而言，这也取决于。这两个示例具有相似的性能，尽管 append is slightly quicker :

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

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

对于作为输入的字符串，html() 相当或更快。

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