jQuery vs document.querySelectorAll

Saya mendengar beberapa kali bahwa aset terkuat jQuery adalah cara ia menanyakan dan memanipulasi elemen dalam DOM: Anda dapat menggunakan kueri CSS untuk membuat kueri kompleks yang akan sangat sulit dilakukan dalam javascript biasa. Namun, sejauh yang saya tahu, Anda dapat mencapai hasil yang sama dengan document.querySelectoratau document.querySelectorAll, yang didukung di Internet Explorer 8 ke atas.

Jadi pertanyaannya adalah ini: mengapa 'risiko' overhead jQuery jika aset terkuatnya dapat dicapai dengan JavaScript murni?

Saya tahu jQuery memiliki lebih dari sekedar penyeleksi CSS, misalnya browser lintas AJAX, acara yang bagus, dll. Tetapi bagian permintaannya adalah bagian yang sangat besar dari kekuatan jQuery!

Adakah pikiran?

document.querySelectorAll() memiliki beberapa ketidakkonsistenan di seluruh browser dan tidak didukung di browser yang lebih lama. ^{Hal ini mungkin tidak akan menimbulkan masalah lagi saat ini} . Ini memiliki mekanisme pelingkupan yang sangat tidak intuitif dan beberapa fitur lain yang tidak begitu bagus . Juga dengan javascript Anda mengalami kesulitan bekerja dengan set hasil dari kueri ini, yang dalam banyak kasus mungkin ingin Anda lakukan. jQuery menyediakan fungsi untuk bekerja pada mereka seperti: filter(), find(), children(), parent(), map(), not()dan beberapa lagi. Belum lagi kemampuan jQuery untuk bekerja dengan penyeleksi pseudo-class.

Namun, saya tidak akan menganggap hal-hal ini sebagai fitur terkuat jQuery tetapi hal-hal lain seperti "bekerja" pada dom (acara, gaya, animasi & manipulasi) dengan cara yang kompatibel dengan crossbrowser atau antarmuka ajax.

Jika Anda hanya menginginkan mesin pemilih dari jQuery, Anda dapat menggunakan satu mesin pemilih jQuery sendiri: Sizzle Dengan begitu Anda memiliki kekuatan mesin pemilih Selector jQuerys tanpa overhead yang buruk.

EDIT: Sekadar catatan, saya penggemar berat vanilla JavaScript. Namun itu fakta bahwa Anda kadang-kadang membutuhkan 10 baris JavaScript di mana Anda akan menulis 1 baris jQuery.

Tentu saja Anda harus disiplin untuk tidak menulis jQuery seperti ini:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

Ini sangat sulit dibaca, sedangkan yang terakhir cukup jelas:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

JavaScript yang setara akan jauh lebih kompleks diilustrasikan oleh kodesemu di atas:

1) Temukan elemen, pertimbangkan untuk mengambil semua elemen atau hanya elemen pertama.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) Iterate melalui array node anak melalui beberapa loop (mungkin bersarang atau rekursif) dan periksa kelas (daftar kelas tidak tersedia di semua browser!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) menerapkan gaya css

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

Kode ini setidaknya dua kali lebih banyak baris kode yang Anda tulis dengan jQuery. Anda juga harus mempertimbangkan masalah lintas-browser yang akan membahayakan keunggulan kecepatan yang parah (selain dari keandalan) dari kode asli.

Jika Anda mengoptimalkan halaman Anda untuk IE8 atau yang lebih baru, Anda harus benar-benar mempertimbangkan apakah Anda memerlukan jquery atau tidak. Browser modern memiliki banyak aset yang disediakan oleh jquery.

Jika Anda peduli dengan kinerja, Anda dapat memperoleh manfaat kinerja luar biasa (2-10 lebih cepat) menggunakan javascript asli: http://jsperf.com/jquery-vs-native-selector-and-element-style/2

Saya mengubah div-tagcloud dari jquery ke javascript asli (kompatibel IE8 +), hasilnya mengesankan. 4 kali lebih cepat dengan hanya sedikit overhead.

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

You Might Not Need Jquery menyediakan ikhtisar yang sangat bagus, yang diganti metode asli untuk versi peramban mana.

http://youmightnotneedjquery.com/

Lampiran: Perbandingan kecepatan lebih lanjut bagaimana metode asli bersaing dengan jquery

• Array: $ .inArray vs Array.indexOf: Jquery 24% lebih lambat

• DOM: $ .empty vs Node.innerHtml: Jquery 97% lebih lambat

• DOM: $ .on vs Node.addEventListener: Jquery 90% lebih lambat

• DOM: $ .find vs Node.queryselectorall: Jquery 90% lebih lambat

• Array: $ .grep vs Array.filter: Asli 70% lebih lambat

• DOM: $ .show / sembunyikan vs tidak ada tampilan: Jquery 85% lebih lambat

• AJAX: $ .ajax vs XMLHttpRequest: Jquery 89% lebih lambat

• Tinggi: $ .outerHeight vs offsetHeight: Jquery 87% lebih lambat

• Attr: $ .attr vs setAttribute: Jquery 86% lebih lambat

Untuk memahami mengapa jQuery begitu populer, penting untuk memahami dari mana kita berasal!

Sekitar satu dekade yang lalu, browser teratas adalah IE6, Netscape 8 dan Firefox 1.5. Kembali pada masa itu, ada sedikit cara lintas browser untuk memilih elemen dari DOM Document.getElementById().

Jadi, ketika jQuery dirilis kembali pada tahun 2006 , itu cukup revolusioner. Saat itu, jQuery menetapkan standar untuk cara memilih / mengubah elemen HTML dengan mudah dan memicu acara, karena fleksibilitas dan dukungan browsernya belum pernah terjadi sebelumnya.

Sekarang, lebih dari satu dekade kemudian, banyak fitur yang membuat jQuery begitu populer telah dimasukkan dalam standar javaScript:

• Alih-alih jQuery $(), sekarang Anda dapat menggunakanDocument.querySelectorAll()
• Alih-alih jQuery $el.on(), sekarang Anda dapat menggunakanEventTarget.addEventListener()
• Alih-alih jQuery $el.toggleClass(), sekarang Anda dapat menggunakanElement.classList.toggle()
• ...

Ini umumnya tidak tersedia kembali pada tahun 2005. Fakta bahwa mereka hari ini jelas menimbulkan pertanyaan mengapa kita harus menggunakan jQuery sama sekali. Dan memang, orang semakin bertanya-tanya apakah kita harus menggunakan jQuery sama sekali .

Jadi, jika Anda pikir Anda memahami JavaScript cukup baik untuk dilakukan tanpa jQuery, silakan lakukan! Jangan merasa terpaksa menggunakan jQuery, hanya karena begitu banyak orang lain yang melakukannya!

Itu karena jQuery dapat melakukan lebih dari itu querySelectorAll.

Pertama-tama, jQuery (dan Sizzle, khususnya), berfungsi untuk peramban lama seperti IE7-8 yang tidak mendukung pemilih CSS2.1-3.

Plus, Sizzle (yang merupakan mesin pemilih di belakang jQuery) menawarkan banyak instrumen pemilih yang lebih canggih, seperti :selectedpseudo-class, :not()pemilih lanjutan , sintaksis yang lebih kompleks seperti di $("> .children")dan sebagainya.

Dan ia melakukannya lintas-browser, tanpa cacat, menawarkan semua yang dapat ditawarkan jQuery (plugin dan API).

Ya, jika Anda pikir Anda bisa mengandalkan penyeleksi kelas dan id sederhana, jQuery terlalu banyak untuk Anda, dan Anda akan membayar lunas yang berlebihan. Tetapi jika Anda tidak, dan ingin memanfaatkan semua kebaikan jQuery, maka gunakan.

Mesin pemilih Sizzle jQuery dapat digunakan querySelectorAlljika tersedia. Ini juga memuluskan inkonsistensi antar browser untuk mencapai hasil yang seragam. Jika Anda tidak ingin menggunakan semua jQuery, Anda bisa menggunakan Sizzle secara terpisah. Ini adalah roda yang cukup mendasar untuk diciptakan.

Berikut ini beberapa pilihan sakura dari sumber yang menunjukkan jenis-jenis barang seperti jQuery (dengan Sizzle):

Mode kebiasaan quirks:

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

Jika penjaga itu gagal itu menggunakan itu adalah versi Sizzle yang tidak ditingkatkan dengan querySelectorAll. Lebih jauh ke bawah ada pegangan khusus untuk inkonsistensi di IE, Opera, dan browser Blackberry.

  // Check parentNode to catch when Blackberry 4.6 returns
  // nodes that are no longer in the document #6963
  if ( elem && elem.parentNode ) {
    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem.id === match[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

Dan jika semuanya gagal itu akan mengembalikan hasil oldSizzle(query, context, extra, seed).

Dalam hal pemeliharaan kode, ada beberapa alasan untuk tetap menggunakan perpustakaan yang banyak digunakan.

Salah satu yang utama adalah bahwa mereka didokumentasikan dengan baik, dan memiliki komunitas seperti ... katakanlah ... stackexchange, di mana bantuan dengan perpustakaan dapat ditemukan. Dengan pustaka kode khusus, Anda memiliki kode sumber, dan mungkin dokumen bagaimana caranya, kecuali jika pembuat kode menghabiskan lebih banyak waktu untuk mendokumentasikan kode daripada menulisnya, yang sangat jarang.

Menulis pustaka Anda sendiri mungkin cocok untuk Anda , tetapi siswa magang yang duduk di meja sebelah mungkin memiliki waktu lebih mudah untuk mempercepat dengan sesuatu seperti jQuery.

Sebut saja efek jaringan jika Anda mau. Ini bukan untuk mengatakan bahwa kode akan lebih unggul di jQuery; Hanya saja sifat singkat dari kode membuatnya lebih mudah untuk memahami struktur keseluruhan untuk programmer dari semua tingkat keahlian, jika hanya karena ada lebih banyak kode fungsional yang terlihat sekaligus dalam file yang Anda lihat. Dalam hal ini, 5 baris kode lebih baik dari 10.

Singkatnya, saya melihat manfaat utama jQuery sebagai kode ringkas, dan di mana-mana.

Berikut ini perbandingan jika saya ingin menerapkan atribut yang sama, misalnya menyembunyikan semua elemen kelas "kelas saya". Ini adalah salah satu alasan untuk menggunakan jQuery.

jQuery:

$('.my-class').hide();

JavaScript:

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

Dengan jQuery yang sudah sangat populer, mereka seharusnya membuat document.querySelector () berperilaku seperti $ (). Alih-alih, document.querySelector () hanya memilih elemen pencocokan pertama yang membuatnya hanya berguna setengah jalan.

seperti situs resmi mengatakan: "jQuery: Perpustakaan Tulis Kurang, Lakukan Lebih Banyak,"

coba terjemahkan kode jQuery berikut tanpa pustaka

$("p.neat").addClass("ohmy").show("slow");

Saya pikir jawaban sebenarnya adalah bahwa jQuery dikembangkan jauh sebelum querySelector/querySelectorAlltersedia di semua browser utama.

Rilis awal jQuery adalah pada tahun 2006 . Bahkan, bahkan jQuery bukan yang pertama yang menerapkan penyeleksi CSS .

IE adalah browser terakhir yang diimplementasikan querySelector/querySelectorAll. Versi 8 dirilis pada tahun 2009 .

Jadi sekarang, pemilih elemen DOM bukan lagi titik terkuat dari jQuery. Namun, ia masih memiliki banyak barang, seperti pintasan untuk mengubah konten css dan html elemen, animasi, event binding, ajax.

Pertanyaan lama, tetapi setengah dekade kemudian, perlu ditinjau kembali. Di sini saya hanya membahas aspek pemilih jQuery.

document.querySelector[All]didukung oleh semua browser saat ini, turun ke IE8, sehingga kompatibilitas tidak lagi menjadi masalah. Saya juga tidak menemukan masalah kinerja untuk dibicarakan (seharusnya lebih lambat daripada document.getElementById, tetapi pengujian saya sendiri menunjukkan bahwa itu sedikit lebih cepat).

Oleh karena itu ketika memanipulasi elemen secara langsung, itu lebih disukai daripada jQuery.

Sebagai contoh:

var element=document.querySelector('h1');
element.innerHTML='Hello';

adalah jauh lebih unggul untuk:

var $element=$('h1');
$element.html('hello');

Untuk melakukan apa saja, jQuery harus menjalankan melalui seratus baris kode (saya pernah menelusuri kode seperti di atas untuk melihat apa yang sebenarnya dilakukan jQuery dengannya). Ini jelas buang-buang waktu semua orang.

Biaya signifikan lain dari jQuery adalah kenyataan bahwa ia membungkus segala sesuatu di dalam objek jQuery baru. Overhead ini sangat boros jika Anda perlu membuka objek lagi atau menggunakan salah satu metode objek untuk menangani properti yang sudah terpapar pada elemen asli.

Di mana jQuery memiliki keuntungan, bagaimanapun, adalah bagaimana menangani koleksi. Jika persyaratannya adalah untuk mengatur properti beberapa elemen, jQuery memiliki eachmetode bawaan yang memungkinkan sesuatu seperti ini:

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

Untuk melakukannya dengan Vanilla JavaScript akan membutuhkan sesuatu seperti ini:

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

yang beberapa menemukan menakutkan.

Selektor jQuery juga sedikit berbeda, tetapi browser modern (tidak termasuk IE8) tidak akan mendapatkan banyak manfaat.

Sebagai aturan, saya memperingatkan agar tidak menggunakan jQuery untuk proyek baru :

• jQuery adalah perpustakaan eksternal yang menambah overhead proyek, dan ketergantungan Anda pada pihak ketiga.
• Fungsi jQuery sangat mahal, dari segi pemrosesan.
• jQuery menerapkan metodologi yang perlu dipelajari dan dapat bersaing dengan aspek lain dari kode Anda.
• jQuery lambat untuk mengekspos fitur baru dalam JavaScript.

Jika tidak ada hal di atas yang penting, maka lakukan apa yang Anda mau. Namun, jQuery tidak lagi penting untuk pengembangan lintas-platform seperti dulu, seperti JavaScript dan CSS modern berjalan lebih jauh dari sebelumnya.

Ini tidak menyebutkan fitur-fitur lain dari jQuery. Namun, saya pikir mereka juga perlu melihat lebih dekat.

$ ("# id") vs document.querySelectorAll ("# id")

Kesepakatannya adalah dengan fungsi $ () ia membuat sebuah array dan kemudian memecahnya untuk Anda tetapi dengan document.querySelectorAll () itu membuat sebuah array dan Anda harus memecahnya.

Hanya komentar tentang ini, ketika menggunakan lite desain material, pemilih jquery tidak mengembalikan properti untuk desain material karena beberapa alasan.

Untuk:

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

Ini bekerja:

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

Ini tidak:

$('#myinputfield').parentNode.MaterialTextfield.change();