什么是使用jQuery创buildHTML元素的最有效方法?

最近我一直在做很多模式窗口popup窗口,而不是,我用jQuery。 我用来在页面上创build新元素的方法绝大多数是沿着以下方向:

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

但是,我感觉这不是最好的或最有效的方法。 从性能的angular度来看,在jQuery中创build元素的最好方法是什么?

这个答案有以下build议的基准。

我使用$(document.createElement('div')); 基准testing显示这种技术是最快的。 我猜测这是因为jQuery不必将其识别为一个元素,并创build该元素本身。

你应该用不同的Javascript引擎来运行基准testing,并将结果与​​观众进行权衡。 从那里做决定。

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

 $('<div>'); 

目前为止的一些build议(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创buildHTML元素的最有效方法?

回答:

既然是关于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。

但是当你处理大量的dynamic元素时,你应该避免在特定元素中添加事件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。

因此,如果您创build并追加数百个具有相同类的元素(例如( myClass )),那么事件处理将消耗更less的内存,因为只有一个处理程序将在那里为所有dynamic插入的元素执行作业。

更新:因为我们可以使用下面的方法来创build一个dynamic元素

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

但是使用jQuery-1.8.0或更高版本的方法不能设置size属性,这里是一个旧的bug报告 ,使用jQuery-1.7.2来看这个例子 ,使用上面的例子显示size属性被设置为30但使用相同的方法,我们不能使用jQuery-1.8.3来设置size属性,这里是一个不工作的小提琴 。 所以,要设置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 (在所有早期版本中未testing) 将不起作用 。

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

有几个解决scheme。 首先是完全不使用它,因为它不会节省任何空间,这样可以提高代码的清晰度:

他们build议采用以下方法(在1.6.4进行testing)

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

所以,最好使用这种方法,海事组织。 这个更新是在我读/find这个答案后做出的,在这个答案中,如果你使用'Size'(capital S)而不是'size'那么它就可以正常工作 ,即使在version-2.0.2

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

另外阅读有关道具 ,因为有一个区别, Attributes vs. Properties ,它不同的版本。

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

(只要看117行 )。

有一些函数调用的开销,但除非性能是至关重要的(你正在创build数百(数千)的元素),没有太多的理由恢复到普通的DOM

只是为一个新的网页创build元素可能是你最好坚持jQuery的做法。

如果你有很多HTML内容(不仅仅是一个div),你可以考虑在隐藏的容器中将HTML构build到页面中,然后进行更新并在需要时使其可见。 通过这种方式,浏览器可以预先分析大部分标记,避免被JavaScript调用时陷入困境。 希望这可以帮助!

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

只要使用document.createElement('div')并跳过JQuery,就可以大大提高性能,当你想要dynamic创build大量元素并追加到DOM时。

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

  $("<div/>"); 

从CPU的angular度来看,您不需要经常执行的操作就不需要原始性能。

你必须明白,元素创build性能的重要性在首先使用jQuery的情况下是无关紧要的。

请记住,创build元素没有真正的目的,除非你真的要使用它。

你可能会试图像$(document.createElement('div'))$('<div>')这样的性能testing,并使用$(document.createElement('div'))获得很好的性能收益,但这是只是一个不在DOM中的元素。

然而,在一天结束的时候,你会想要使用这个元素,所以真正的testing应该包括f.ex。 .appendTo();

让我们来看看,如果你对对方进行以下testing:

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

你会注意到结果会有所不同。 有时候一种方式比另一种更好。 这只是因为计算机上后台任务的数量随时间而改变。

在这里testing自己

所以,在一天结束的时候,你会select创build一个元素的最小和最可读的方式。 这样,至less,你的脚本文件将尽可能小。 在DOM中使用它之前,可能比性能点更重要的因素是创build元素的方式。

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

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

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

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

然后用jquery调用所有这些。

我正在使用jquery.min v2.0.3。 这对我来说更好使用以下内容:

 var select = jQuery("#selecter"); jQuery("`<option/>`",{value: someValue, text: someText}).appendTo(select); 

如下所示:

 var select = jQuery("#selecter"); jQuery(document.createElement('option')).prop({value: someValue, text: someText}).appendTo(select); 

第一个代码的处理时间远远低于第二个代码。

假设我们有场景来dynamicreplace一些html标签来格式化,我们不能使用$('#id').text(); 因为它不会接受html格式的文本 ,为了完成这些工作,我们需要使用jQuery append方法,而不是每次我们需要更新和使用append方法时.text()方法的替代方法。

 var fileImportStatus; $('#id').change(function() { if ($('#id').is(':checked')) { fileImportStatus = "<strong>ON</strong>"; } else { fileImportStatus = "<strong>OFF</strong>"; } }); $('#saveBtn').click(function() { $('#fileImportStatusTxt').empty(); $('#fileImportStatusTxt').append('File Import is ' + fileImportStatus); });