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

2020/09/27 22:01 · javascript ·  · 0评论

最近,我一直在做很多模态窗口弹出窗口,而我没有使用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使用属性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,取自jQuery错误报告

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

他们建议使用以下方法(也适用于较早的方法,已在中进行测试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行)。

有一些函数调用开销,但是除非性能至关重要(要创建成百上千个元素),否则没有太多理由恢复为纯DOM

仅为新网页创建元素可能是您最好坚持使用jQuery做事方式的一种情况。

如果您有很多HTML内容(不仅仅是一个div),则可以考虑将HTML构建到隐藏容器中的页面中,然后对其进行更新并在需要时使其可见。这样,您的标记的很大一部分可以由浏览器预先解析,并且避免在调用时陷入JavaScript的泥潭。希望这可以帮助!

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

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

我认为您正在使用最佳方法,尽管可以将其优化为:

 $("<div/>");

从CPU的角度来看,您不需要从原始操作中获得很少性能的原始性能。

您必须了解,元素创建性能的重要性与首先使用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中使用元素之前创建元素的方式相比,在性能点上可能是更重要的因素。

有人已经制定了基准:
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);

第一个代码的处理时间比第二个代码要短得多。

本文地址:http://javascript.askforanswer.com/shiyongjquerychuangjianhtmlyuansudezuiyouxiaofangfashishenme.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!