JQuery kullanarak HTML öğeleri oluşturmanın en etkili yolu nedir?

Son zamanlarda çok sayıda modal pencere pop-up yapıyorum ve ne için, hangi jQuery kullandım. Sayfada yeni öğeler oluşturmak için kullandığım yöntem ezici bir çoğunlukla şu satırlarda olmuştur:

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

Ancak, bunu yapmanın en iyi veya en etkili yöntemi olmadığını hissediyorum. Performans açısından jQuery'de eleman oluşturmanın en iyi yolu nedir?

Bu yanıt aşağıdaki önerilere ilişkin kıyaslama ölçütlerine sahiptir.

$(document.createElement('div')); Benchmarking kullanıyorum bu tekniğin en hızlı olduğunu gösteriyor. Bunun jQuery bir eleman olarak tanımlamak ve elemanın kendisi oluşturmak zorunda değildir çünkü spekülasyon.

Gerçekten farklı Javascript motorlarıyla karşılaştırmalar yapmalı ve kitlenizi sonuçlarla tartmalısınız. Oradan bir karar verin.

Şahsen ben (okunabilirlik için) öneririm:

$('<div>');

şu ana kadar yapılan önerilerde bazı rakamlar (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              

Soru:

JQuery kullanarak HTML öğeleri oluşturmanın en etkili yolu nedir?

Cevap:

O zamandan beri, jQuerybu (temiz) yaklaşımı kullanmak daha iyi olduğunu düşünüyorum (kullanıyorsunuz)

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

DEMO.

Bu şekilde, aşağıdaki gibi belirli bir öğe için olay işleyicileri bile kullanabilirsiniz

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

Ancak çok sayıda dinamik handlersöğeyle uğraşırken , belirli bir öğeye etkinlik eklemekten kaçınmalısınız , bunun yerine, yetkilendirilmiş bir olay işleyicisi kullanmalısınız.

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

Bu nedenle, aynı sınıfa (yani myClass) sahip yüzlerce öğe oluşturup eklerseniz, olay işleme için daha az bellek tüketilir, çünkü tüm dinamik olarak eklenen öğeler için işi yapmak için yalnızca bir işleyici olacaktır.

Güncelleme: Dinamik bir öğe oluşturmak için aşağıdaki yaklaşımı kullanabileceğimizden

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

Ama sizenitelik kullanarak bu yaklaşımı kullanarak ayarlanamaz jQuery-1.8.0burada eski veya üstü ve hata raporu olarak, göz bu örnekte kullanarak jQuery-1.7.2o hangi gösterileri sizenitelik olarak ayarlanır 30örneğin yukarıda kullanarak ama biz seti aynı yaklaşımı olamaz kullanarak sizekullanarak niteliği jQuery-1.8.3burada, bir olan olmayan çalışma keman . Yani, özelliği ayarlamak için sizeaşağıdaki yaklaşımı kullanabiliriz

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

Ya da bu

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

Biz geçebilir attr/propbir alt nesne olarak değil, o çalışır jQuery-1.8.0 and latersürümleri kontrol bu örneği ama işe yaramaz içinde jQuery-1.7.2 or earlier(bütün önceki sürümlerinde test edilmedi).

BTW, jQueryhata raporundan alındı

Birkaç çözüm var. Birincisi, hiç kullanmamanız, çünkü size yer kazandırmaz ve bu kodun netliğini artırır:

Aşağıdaki yaklaşımı kullanmanızı tavsiye ettiler ( daha önce yapılanlarda da test edildi 1.6.4)

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

Dolayısıyla, bu yaklaşımı kullanmak daha iyidir, IMO. Bu güncelleştirme okudum sonra / buldum yapılır bu cevabı ve bu cevabı gösterir o kullanırsanız 'Size'(capital S)yerine 'size'şimdi geçecek sadece iş para cezası , hatta içindeversion-2.0.2

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

Ayrıca prop hakkında okuyun , çünkü bir fark var, Attributes vs. Propertiesversiyonlara göre değişir.

Aslında, eğer yapıyorsanız $('<div>'), jQuery de kullanacaktır document.createElement().

( 117 numaralı satıra bir göz atın ).

Bazı işlev çağrısı ek yükleri vardır, ancak performans kritik değilse (yüzlerce [binlerce] öğe oluşturmuyorsanız), düz DOM'ya geri dönmek için fazla bir neden yoktur .

Sadece yeni bir web sayfası için elemanlar oluşturmak, muhtemelen en iyi şeyleri yapmanın jQuery yöntemine bağlı kalacağınız bir durumdur .

Çok fazla HTML içeriğiniz varsa (yalnızca tek bir div'dan daha fazlası), HTML'yi gizli bir kapsayıcı içindeki sayfaya oluşturmayı, ardından güncellemeyi ve gerektiğinde görünür hale getirmeyi düşünebilirsiniz. Bu şekilde, işaretlemenizin büyük bir kısmı tarayıcı tarafından önceden ayrıştırılabilir ve çağrıldığında JavaScript tarafından bataklığa düşmekten kaçınabilir. Bu yardımcı olur umarım!

Bu soru için doğru cevap değil ama yine de bunu paylaşmak istiyorum ...

Sadece kullanmak document.createElement('div')ve JQuery'yi atlamak, birçok öğeyi anında yapmak ve DOM'a eklemek istediğinizde performansı çok artıracaktır.

En iyi yöntemi kullandığınızı düşünüyorum, ancak aşağıdakileri optimize edebilirsiniz:

 $("<div/>");

İşlemci açısından son derece seyrek gerçekleştireceğiniz bir işlemde ham performansa ihtiyacınız yoktur.

Eleman oluşturma performansının öneminin, öncelikle jQuery kullanımı bağlamında alakasız olduğunu anlamalısınız.

Unutmayın, gerçekten kullanmayacaksanız bir öğe oluşturmanın gerçek bir amacı yoktur.

Sen gibi performans testi şeye cazip olabilir $(document.createElement('div'))vs. $('<div>')kullanarak büyük performans kazancı elde $(document.createElement('div'))ancak bu henüz DOM değil sadece bir element.

Ancak, günün sonunda, öğeyi yine de kullanmak isteyeceksiniz, böylece gerçek test f.ex'i içermelidir. .appendTo ();

Aşağıdakileri birbirlerine karşı test ederseniz, bakalım:

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

Sonuçların değişeceğini fark edeceksiniz. Bazen bir yol diğerinden daha iyi performans gösterir. Bunun nedeni, bilgisayarınızdaki arka plan görevlerinin zaman içinde değişmesidir.

Kendinizi burada test edin

Böylece, günün sonunda, bir öğe oluşturmanın en küçük ve en okunabilir yolunu seçmek istersiniz. Bu şekilde, en azından komut dosyalarınız mümkün olan en küçük olacaktır. Muhtemelen performans noktasında, DOM'da kullanmadan önce bir öğe oluşturma yolundan daha önemli bir faktördür.

Birisi zaten bir kıyaslama yaptı: jQuery document.createElement eşdeğeri?

$(document.createElement('div')) büyük kazanır.

Bir nokta, yapmanın daha kolay olabileceğidir:

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

Sonra tüm bunları jquery çağrıları ile yapmak.

Jquery.min v2.0.3 kullanıyorum. Aşağıdakileri kullanmak benim için daha iyi:

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

aşağıdaki gibi:

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

Birinci kodun işlem süresi ikinci koddan çok daha düşüktür.