javascript - 使用 jQuery 创建更深的嵌套节点和属性时，哪种方法性能更高？

Question

我创建深度节点以及这样的属性。

$('<div id="apple"><div id="grape"><div class="tclass1" id="orange"></div><div class="tclass2" id="watermelon"></div></div><div id="banana"><div id="papaya"></div><div id="pineaple"></div><div id="starfruit"></div></div></div>');

与 jQuery 中的纯方法相比，还有其他更有效的方法，正如我在 a test case 中看到的那样。但是创建这样的深度节点怎么样？

我可以(1)合并 $.parseHTML() 来解析字符串，然后将其附加到使用 native javacsript document.createELement 创建的父元素以提高性能。使用 (2) add() 是可能的。我还可以(3)为每个元素创建节点，并使用 attr() 为其分配属性值，然后将子级附加到父级。

(1)

...
<!-- this is in the DOM -->
<div id="juz"></div>
...

...
var dui = document.createElement('DIV');
dui.id = 'apple';
document.getElementById("juz").appendChild(dui);
var str = '<div id="grape"><div class="tclass1" id="orange"></div><div class="tclass2" id="watermelon"></div></div><div id="banana"><div id="papaya"></div><div id="pineaple"></div><div id="starfruit"></div></div>';
var html = $.parseHTML(str);
$("#juz").append(html);
...

(3)

...
<!-- in the dom -->
<div id="juz"></div>
...

...
var smj = $("<div>").attr("id","apple");
var sem = $("<div>").attr({"class":"tclass1","id":"orange"});
var rts = $("<div>").attr({"class":"tclass2","id":"watermelon"});
var rrw = $("<div>").attr("id","grape");
var jhy = $("<div>").attr("id","papaya");
var hsy = $("<div>").attr("id","pineaple");
var poi = $("<div>").attr("id","starfruit");
var las = $("<div>").attr("id","banana");
var gty = las.append(jhy).append(hsy).append(poi);
var pwq = rrw.append(sem).append(rts);
var pytr = smj.append(pwq).append(gty);
$("#juz").append(pytr);
...

但是，我怀疑对于这种更深的嵌套节点来说哪一个是最快的，因为我无法制作可靠的测试用例。您知道我应该选择哪种方法而不是其他方法吗？您会提供测试用例吗？谢谢!

Answer 1

与所有性能相关的问题一样:

1. 过早的性能优化是邪恶的。它只会导致您花时间尝试提高性能，然后您甚至不知道在该领域的性能上付出任何努力是值得的。

2. 没有强有力的证据表明您需要担心性能问题，代码应该以最清晰、最简单、最易于维护的方式编写。

3. 如果您需要解决性能问题，则只能通过直接测量当前代码和理论解决方案来解决性能问题和解决方案。并且，测量必须在相关的目标环境中进行，并具有代表性的数据。

在说明一系列 HTML 元素的情况下，编写该代码的最简单方法是使用 HTML 字符串并将其设置为容器的 .innerHTML。这可以通过两行代码来完成，并且代码正在做什么是完全明显的(例如易于理解)。对于大块 HTML，人们甚至可能从另一个文件中读取模板。或者，如果要将内容添加到现有容器中，则可以使用 HTML 片段。

因此，我建议您从最简单的方法开始，只有当您有经过测试、衡量和量化的理由时才可以偏离该方法:

var html = '<div id="apple"><div id="grape"><div class="tclass1" id="orange"></div><div class="tclass2" id="watermelon"></div></div><div id="banana"><div id="papaya"></div><div id="pineaple"></div><div id="starfruit"></div></div></div>'
$("#juz").append(html);

注意，jQuery 方法 .append() 直接接受 HTML 字符串，无需事先自己解析 HTML。

<小时/>

以下是有关 DOM 操作性能的一些一般说明:

1. 大量连续的 DOM 操作通常是最慢的处理方式。每一个都会触发重新布局和重绘，每一个都会触发 DOM 树更新等等......

2. 通过从 HTML 字符串设置 .innerHTML 属性进行的大型操作可能会快得惊人(尽管会因浏览器而异)。但是，请勿执行 x.innerHTML = x.innerHTML + newHTML 操作，因为这会重新解析现有 HTML，并用全新的 DOM 元素替换现有 DOM 元素。

3. 如果您必须在代码中进行大量 DOM 插入，那么通常最好在 DOM 外部构建一棵 DOM 节点树，然后在一次最终操作中将其插入到 DOM 中。您可以使用公共(public)父节点或 DOM 片段作为您正在创建的节点的父节点。这意味着大多数 DOM 更改将在外部树实际显示在实时 DOM 中之前对外部树进行。

<小时/>

相关答案:

jQuery DOM manipulation efficiency - building entire page with JavaScript