Question

我知道有一些功能可用于使用createElement（）创建节点div，但是还有其他差异吗？性能？可用性？等...

字符串div

$('body').append("<div>foo</div>");

与

创建节点div

var newDiv = document.createElement("div");
var divContent = document.createTextNode("foo");
newDiv.appendChild(divContent);
$('body').append(newDiv);

Answer 1

使用字符串（示例1）实际上比创建节点（第二个示例）更好。这是因为jQuery已经为你做了节点示例中的内容，所以你在第二个例子中做了双重工作。

因为人们似乎并不相信我，所以这里是我制作和运行的简单基准测试，每种方法执行10,000次操作：

var start = performance.now();
for (var i = 0; i < 10000; i++) {
    $('body').append("<div>foo</div>");
}
console.log('Took ' + (performance.now() - start) + ' ms');

在10次测试中平均花费70毫秒。

var start = performance.now();
for (var i = 0; i < 10000; i++) {
    var newDiv = document.createElement("div");
    var divContent = document.createTextNode("foo");
    newDiv.appendChild(divContent);
    $('body').append(newDiv);
}
console.log('Took ' + (performance.now() - start) + ' ms');

在10次测试中平均花费110毫秒。

请记住，这完全取决于浏览器，jquery版本，页面上的其他javascript等等。也就是说，如果您在dom中添加了许多元素，而这些性能实际上很重要，那么我就会这样做。 ; d非常惊讶。

创建div作为字符串与使用createElement（）之间的区别是什么？

1 个答案: