使用jQuery创建HTML元素的最有效方法是什么？

Question

最近我一直在做很多模态窗口弹出窗口,什么不是,我使用jQuery.我用来在页面上创建新元素的方法绝大多数都是这样的:

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

但是,我觉得这不是最好或最有效的方法.从性能角度来看,在jQuery中创建元素的最佳方法是什么？

这个答案有以下建议的基准.

Answer 1

我使用$(document.createElement('div')); Benchmarking显示这种技术是最快的.我推测这是因为jQuery不必将其识别为元素并创建元素本身.

您应该使用不同的Javascript引擎运行基准测试,并根据结果权衡您的受众.从那里做出决定.

Answer 2

我亲自建议(为了便于阅读):

$('<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              

Answer 3

题:

使用jQuery创建HTML元素的最有效方法是什么？

回答:

因为jQuery那时我认为最好使用这种(干净的)方法(你正在使用)

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

DEMO.

这样,您甚至可以为特定元素使用事件处理程序

$('<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');

DEMO.

但是当你处理大量的动态元素时,你应该避免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');
}

DEMO.

因此,如果您创建并附加数百个具有相同类的元素,即(myClass),那么事件处理将消耗更少的内存,因为只有一个处理程序可用于为所有动态插入的元素执行任务.

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

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

但是size使用这种方法jQuery-1.8.0或者稍后使用这种方法无法设置属性,这里是一个旧的bug报告,请看这个示例使用jQuery-1.7.2哪个显示size属性设置为30使用上面的示例但是使用相同的方法我们无法设置size属性使用jQuery-1.8.3,这里是一个不工作的小提琴.因此,要设置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(在所有早期版本未测试).

BTW,取自jQuerybug报告

有几种解决方案.第一种是根本不使用它,因为它不会为您节省任何空间,这提高了代码的清晰度:

他们建议使用以下方法(也适用于早期的方法,经过测试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');

另外阅读关于道具,因为有区别Attributes vs. Properties,它因版本而异.

Answer 4

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

(只需看看第117行).

有一些函数调用开销,但除非性能是关键的(你创建了数百[数千]元素),没有太多理由恢复到纯DOM.

只是为新网页创建元素可能是一个你最好坚持jQuery做事方式的情况.

Answer 5

如果你有很多的HTML内容(不仅仅是一个单一的div以上),你可能会考虑建立HTML到页面中的隐藏的容器内,然后更新它,并在需要的时候使其可见.这样,您的标记的很大一部分可以由浏览器预先解析,并避免在调用时被JavaScript陷入困境.希望这可以帮助!

Answer 6

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

document.createElement('div')当你想要动态制作大量元素并附加到DOM时,使用Just和skip JQuery将大大提高性能.

Answer 7

我认为你正在使用最好的方法,尽管你可以优化它:

 $("<div/>");

Answer 8

从CPU的角度来看,您不需要执行极其频繁执行的操作的原始性能.

Answer 9

您必须了解元素创建性能的重要性在首先使用jQuery的上下文中是无关紧要的.

请记住,除非你真的要使用它,否则没有创建元素的真正目的.

您可能会尝试使用类似于$(document.createElement('div'))vs的性能测试,$('<div>')并从使用中获得很好的性能提升,$(document.createElement('div'))但这只是一个尚未在DOM中的元素.

但是,在一天结束时,你仍然想要使用元素,所以真正的测试应该包括f.ex. .appendTo();

让我们看看,如果你互相测试以下内容:

var e = $(document.createElement('div')).appendTo('#target');
var e = $('<div>').appendTo('#target');
var e = $('<div></div>').appendTo('#target');
var e = $('<div/>').appendTo('#target');

您会注意到结果会有所不同.有时一种方式比另一种方式表现更好.这只是因为计算机上的后台任务量随着时间的推移而变化.

在这里测试自己

因此,在一天结束时,您确实希望选择最小且最易读的创建元素的方式.这样,至少,您的脚本文件将尽可能小.对于性能点而言,可能比在DOM中使用它之前创建元素的方式更重要.

Answer 10

有人已经做了一个基准: jQuery document.createElement等价？

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

Answer 11

有一点是它可能更容易做到:

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

然后使用jquery调用完成所有这些操作.