最近我做了很多模态窗口弹出之类的事情,为此我使用了jQuery。我用来在页面上创建新元素的方法基本上是这样的:
$("<div></div>");
然而,我感觉这并不是最好或最有效的方法。从性能的角度来看,用jQuery创建元素的最佳方法是什么?
这个答案有以下建议的基准。
最近我做了很多模态窗口弹出之类的事情,为此我使用了jQuery。我用来在页面上创建新元素的方法基本上是这样的:
$("<div></div>");
然而,我感觉这并不是最好或最有效的方法。从性能的角度来看,用jQuery创建元素的最佳方法是什么?
这个答案有以下建议的基准。
当前回答
我使用$(document.createElement('div'));基准测试表明这种技术是最快的。我推测这是因为jQuery不需要将其标识为元素并自己创建元素。
您应该使用不同的Javascript引擎运行基准测试,并根据结果来衡量您的受众。然后再做决定。
其他回答
有一点可能更容易做到:
$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")
然后用jquery调用完成所有这些。
从CPU的角度来看,您不需要一个极少执行的操作的原始性能。
我认为你使用了最好的方法,尽管你可以优化它:
$("<div/>");
我个人建议(为了可读性):
$('<div>');
目前建议的一些数字(safari 3.2.1 / MAC OS x):
var it = 50000;
var start = new Date().getTime();
for (i = 0; i < it; ++i) {
// test creation of an element
// see below statements
}
var end = new Date().getTime();
alert( end - start );
var e = $( document.createElement('div') ); // ~300ms
var e = $('<div>'); // ~3100ms
var e = $('<div></div>'); // ~3200ms
var e = $('<div/>'); // ~3500ms
有人已经做了一个基准: jQuery文档。createElement等价?
$(document.createElement('div'))是最大的赢家。