Apa cara paling efisien untuk membuat elemen HTML menggunakan jQuery?

Baru-baru ini saya telah melakukan banyak jendela pop-up dan apa yang tidak, yang saya gunakan jQuery. Metode yang saya gunakan untuk membuat elemen baru pada halaman telah sangat sejalan:

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

Namun, saya merasa ini bukan metode terbaik atau paling efisien untuk melakukan ini. Apa cara terbaik untuk membuat elemen di jQuery dari perspektif kinerja?

Jawaban ini memiliki tolok ukur untuk saran di bawah ini.

Saya menggunakan $(document.createElement('div')); Benchmarking menunjukkan teknik ini adalah yang tercepat. Saya berspekulasi ini karena jQuery tidak harus mengidentifikasinya sebagai elemen dan membuat elemen itu sendiri.

Anda harus benar-benar menjalankan benchmark dengan mesin Javascript yang berbeda dan menimbang audiens Anda dengan hasilnya. Buat keputusan dari sana.

secara pribadi saya sarankan (agar mudah dibaca):

$('<div>');

beberapa angka pada saran sejauh ini (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              

Pertanyaan:

Apa cara paling efisien untuk membuat elemen HTML menggunakan jQuery?

Menjawab:

Karena sudah sekitar jQuerymaka saya pikir lebih baik menggunakan pendekatan (bersih) ini (Anda menggunakan)

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

DEMO.

Dengan cara ini, Anda bahkan dapat menggunakan penangan acara untuk elemen tertentu seperti

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

Tetapi ketika Anda berurusan dengan banyak elemen dinamis, Anda harus menghindari menambahkan peristiwa handlersdalam elemen tertentu, sebagai gantinya, Anda harus menggunakan event handler yang didelegasikan, seperti

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

Jadi, jika Anda membuat dan menambahkan ratusan elemen dengan kelas yang sama, yaitu ( myClass) maka lebih sedikit memori akan digunakan untuk penanganan acara, karena hanya ada satu penangan yang akan melakukan pekerjaan untuk semua elemen yang dimasukkan secara dinamis.

Pembaruan: Karena kita dapat menggunakan pendekatan berikut untuk membuat elemen dinamis

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

Tetapi sizeatribut tidak dapat diatur menggunakan pendekatan ini menggunakan jQuery-1.8.0atau yang lebih baru dan ini adalah laporan bug lama , lihat contoh ini menggunakan jQuery-1.7.2yang menunjukkan bahwa sizeatribut diatur untuk 30menggunakan contoh di atas tetapi menggunakan pendekatan yang sama kita tidak dapat mengatur sizeatribut menggunakan jQuery-1.8.3, di sini adalah biola yang tidak bekerja . Jadi, untuk mengatur sizeatribut, kita bisa menggunakan pendekatan berikut

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

Atau yang ini

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

Kita bisa lulus attr/propsebagai objek anak-anak tetapi berfungsi dalam jQuery-1.8.0 and laterversi memeriksa contoh ini tetapi tidak akan berhasil masukjQuery-1.7.2 or earlier (tidak diuji di semua versi sebelumnya).

BTW, diambil dari jQuerylaporan bug

Ada beberapa solusi. Yang pertama adalah untuk tidak menggunakannya sama sekali, karena tidak menghemat ruang apa pun dan ini meningkatkan kejelasan kode:

Mereka menyarankan untuk menggunakan pendekatan berikut ( bekerja di yang sebelumnya juga, diuji dalam 1.6.4)

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

Jadi, lebih baik menggunakan pendekatan ini, IMO. Pembaruan ini dibuat setelah saya membaca / menemukan jawaban ini dan dalam jawaban ini menunjukkan bahwa jika Anda menggunakan 'Size'(capital S)alih-alih 'size'itu hanya akan berfungsi dengan baik , bahkan diversion-2.0.2

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

Baca juga tentang prop , karena ada perbedaan Attributes vs. Properties,, itu bervariasi melalui versi.

Sebenarnya, jika Anda melakukannya $('<div>'), jQuery juga akan digunakandocument.createElement() .

(Lihat saja pada baris 117 ).

Ada beberapa fungsi-panggilan overhead, tetapi kecuali kinerja sangat penting (Anda membuat ratusan [ribuan] elemen), tidak ada banyak alasan untuk kembali ke DOM biasa .

Hanya membuat elemen untuk halaman web baru mungkin merupakan kasus di mana Anda akan tetap berpegang pada cara jQuery melakukan sesuatu.

Jika Anda memiliki banyak konten HTML (lebih dari sekadar satu div), Anda dapat mempertimbangkan untuk membuat HTML ke dalam halaman di dalam wadah tersembunyi, kemudian memperbaruinya dan membuatnya terlihat saat dibutuhkan. Dengan cara ini, sebagian besar markup Anda dapat dipra-parsing oleh browser dan menghindari macet oleh JavaScript saat dipanggil. Semoga ini membantu!

Ini bukan jawaban yang benar untuk pertanyaan itu tetapi saya tetap ingin membagikan ini ...

Menggunakan just document.createElement('div')and skipping JQuery akan banyak meningkatkan kinerja ketika Anda ingin membuat banyak elemen dengan cepat dan menambahkan ke DOM.

Saya pikir Anda menggunakan metode terbaik, meskipun Anda bisa mengoptimalkannya untuk:

 $("<div/>");

Anda tidak perlu kinerja mentah dari operasi yang akan Anda lakukan sangat jarang dari sudut pandang CPU.

Anda harus memahami bahwa pentingnya kinerja pembuatan elemen tidak relevan dalam konteks menggunakan jQuery.

Ingat, tidak ada tujuan nyata untuk membuat elemen kecuali Anda benar-benar akan menggunakannya.

Anda mungkin tergoda untuk menguji kinerja sesuatu seperti $(document.createElement('div'))vs. $('<div>')dan mendapatkan keuntungan kinerja yang hebat dari menggunakan $(document.createElement('div'))tetapi itu hanya elemen yang belum ada dalam DOM.

Namun, pada akhirnya, Anda tetap ingin menggunakan elemen tersebut sehingga tes sesungguhnya harus mencakup f.ex. .appendTo ();

Mari kita lihat, jika Anda menguji yang berikut terhadap satu sama lain:

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

Anda akan melihat hasilnya akan bervariasi. Terkadang satu cara lebih baik kinerjanya daripada yang lain. Dan ini hanya karena jumlah tugas latar belakang di komputer Anda berubah seiring waktu.

Uji diri Anda di sini

Jadi, pada akhirnya, Anda ingin memilih cara terkecil dan paling mudah dibaca untuk membuat elemen. Dengan begitu, setidaknya, file skrip Anda akan sekecil mungkin. Mungkin faktor yang lebih signifikan pada titik kinerja daripada cara membuat elemen sebelum Anda menggunakannya di DOM.

Seseorang telah membuat patokan: setara dengan jQuery document.createElement?

$(document.createElement('div')) adalah pemenang besar.

Satu hal yang lebih mudah dilakukan:

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

Kemudian untuk melakukan semua itu dengan panggilan jquery.

Saya menggunakan jquery.min v2.0.3. Bagi saya lebih baik menggunakan yang berikut:

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

sebagai berikut:

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

Waktu pemrosesan kode pertama jauh lebih rendah daripada kode kedua.