javascript - jquery的最有效的方式来创建html元素是什么?

  显示原文与译文双语对照的内容

最近我做了很多模式窗口 pop-ups,而不是什么,我使用了 jQuery 。 我用来在页面上创建新元素的方法基本上是沿着以下行进行的:


$("<div></div>");

然而,我觉得这不是最好的或最有效的方法这样做。 什么是最好的方法来创建元素jquery从性能角度来看?

这个答案包含以下建议的基准。

时间:

我使用 $(document.createElement('div'));基准测试显示这个技术是最快的。 我推测这是因为jQuery不需要将它标识为元素并创建元素本身。

你真的应该用不同的Javascript引擎运行基准测试,并用结果衡量你的听众。 从那里做出决定。

我个人建议( 为了可读性):

 
$('<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的最有效的方式来创建html元素是什么?

答案:

因为它是关于 jQuery的,所以我认为最好使用这个( 清理) 方法( 你正在使用)


$('<div/>', {
 'id':'myDiv',
 'class':'myClass',
 'text':'Text Only',
}).on('click', function(){
 alert(this.id);//myDiv
}).appendTo('body');

演示。

这样,甚至可以对特定元素使用事件处理程序,比如


$('<div/>', {
 'id':'myDiv',
 'class':'myClass',
 'style':'cursor:pointer;font-weight:bold;',
 'html':'<span>For HTML</span>',
 'click':function(){ alert(this.id) },
 'mouseenter':function(){ $(this).css('color', 'red'); },
 'mouseleave':function(){ $(this).css('color', 'black'); }
}).appendTo('body');

演示。

但是,当你处理大量动态元素时,你应该避免在特定元素中添加事件 handlers,相反,你应该使用委托事件处理程序,比如


$(document).on('click', '.myClass', function(){
 alert(this.innerHTML);
});

var i=1;
for(;i<=200;i++){
 $('<div/>', {
 'class':'myClass',
 'html':'<span>Element'+i+'</span>'
 }).appendTo('body');
}

演示。

所以,如果你创建和附加数以百计的元素相同的类, 换句话说,( myClass ) 事件处理则会消耗更少的内存,因为只有一个处理程序会为所有动态插入元素来做这项工作。

更新:因为我们可以使用以下方法创建动态元素


$('<input/>', {
 'type': 'Text',
 'value':'Some Text',
 'size': '30'
}).appendTo("body");

但是 size 属性不能使用这种方法使用 jQuery-1.8.0 或之后,这里是一个古老的Bug 报告,看看这个例子使用 jQuery-1.7.2表明 size 属性设置为 30 上面示例使用但使用同样的方法我们可以不使用 size 0设置 size 属性,这是一个 size 1 size 2小提琴 。 因此,要设置 size 属性,可以使用以下方法


$('<input/>', {
 'type': 'Text',
 'value':'Some Text',
 attr: { size:"30" }
}).appendTo("body");

或者这个


$('<input/>', {
 'type': 'Text',
 'value':'Some Text',
 prop: { size:"30" }
}).appendTo("body");

小时候我们可以通过 attr/prop 对象但 jQuery-1.8.0 and later 版本检查这个例子不会工作jQuery-1.7.2 or earlier ( 不能在所有早期版本中测试) 。

顺便说一句,取自 jQuery Bug 报告

有几个解决方案。第一个是不使用它,因为它不保存任何空间,从而提高代码的清晰度:

他们建议使用以下方法(作品在早期的, 1.6.4 测试)


$('<input/>')
.attr( { type:'text', size:50, autofocus:1 } )
.val("Some text").appendTo("body");

所以,最好使用这种方法,IMO 。 这个更新后我读/发现这个答案这种回答表明,如果你用 'Size'(capital S) 代替 'size' 然后就工作,甚至在 version-2.0.2


$('<input>', {
 'type' : 'text',
 'Size' : '50',//size won't work
 'autofocus' : 'true'
}).appendTo('body');

同时阅读关于 prop,因为有一个差异,Attributes vs. Properties,它通过版本变化。

实际上,如果你在做 $('<div>'),jQuery也会使用 document.createElement()

( 查看第 117行 ) 。

有一些function-call开销,但是除非性能是关键的( 你正在创建数百个 [thousands] 元素),否则还没有足够的理由恢复为普通的

只是创建新网页元素可能是最好的一个案件中,你会坚持 jQuery做事的方式。

这不是问题的正确答案,但我还是想分享这个。。

只用 document.createElement('div') 和跳过jquery将提高性能很多当你想让许多元素动态和附加到dom。

有人已经制定了基准: document.createElement 等价的

$(document.createElement('div')) 是大赢家。

一点是这样做可能更容易:


$("<div class=foo id=bar style='color:white;bgcolor:blue;font-size:12pt'></div>")

然后用jquery调用完成所有这些。

...