jQuery .hasClass () vs .is ()

96

apakah ada metode yang disukai untuk menentukan apakah suatu elemen diberi kelas, dari sudut pandang kinerja?

$('#foo').hasClass('bar');

atau

$('#foo').is('.bar');
jquery Omer Bokhari
sumber
6
Anda selalu dapat memvalidasi kinerja di situs ini juga melalui beberapa browser: jsperf.com ... Berikut adalah beberapa kasus uji untuk dijelajahi: jsperf.com/browse
iwasrobbed

Jawaban:

164

Memperbarui:

Saya melakukan tes setelah komentar dan empat suara positif untuk komentar. Ternyata apa yang saya katakan adalah jawaban yang benar. Inilah hasilnya:

masukkan deskripsi gambar di sini

http://jsperf.com/hasclass-vs-is-so

Ini ismulti-tujuan, Anda dapat misalnya melakukan is('.class'),, is(':checked')dll yang berarti ismemiliki lebih banyak hal yang harus dilakukan di mana hasClassterbatas yang hanya memeriksa kelas yang disetel atau tidak.

Karenanya, hasClassharus lebih cepat jika kinerja di level mana pun adalah prioritas Anda.

Sarfraz
sumber
7
Apakah Anda punya bukti bahwa ini lebih cepat? Hanya karena suatu fungsi memiliki fungsionalitas yang lebih sedikit BUKAN berarti ia secara otomatis lebih cepat.
Kris
15
@Kris: Ya saya lakukan: jsf.com/asclass-vs-is-so . Seperti yang saya katakan, hasClass adalah jauh lebih cepat.
Sarfraz
4
'jauh lebih cepat' => 'lebih cepat'
Kirk Strobeck
@SgtPooki, saya hanya meminta bukti; jika itu benar saya ingin tahu mengapa. Saya penasaran seperti itu :). Anda dapat dengan mudah memiliki lebih banyak fungsionalitas dan membuatnya lebih cepat; itu selalu tergantung pada implementasi. 99% Anda adalah generalisasi menyeluruh dan belum tentu kondisi pengembangan perangkat lunak yang sebenarnya. Pertanyaan Anda tentang "Apakah jQuery akan pernah secepat JavaScript? Jawaban selain tidak adalah salah." bukanlah pertanyaan yang bagus; jQuery sebenarnya memiliki banyak pengoptimalan yang akan memberikan akses lebih cepat ke elemen DOM setelah data di-cache; itu sangat tergantung pada penggunaan spesifik Anda.
Kris
1
@SgtPooki sejauh lebih cepat lihat mesin pemilih mendesis; karena saya terus menyebutkan itu tergantung pada implementasi dan di browser lama yang tidak mendukung kueri secara native, kemungkinan besar akan lebih cepat melalui implementasi jQuery karena tidak ada versi asli (menang secara default). Juga jika Anda terus mengingat elemen DOM yang sama, bergantung pada browser dan versinya, mungkin diperlukan waktu tambahan karena jQuery dapat menyimpan elemen ini ke cache untuk pengambilan lebih cepat. Biasanya fungsi JavaScript asli akan lebih cepat; tetapi itu tergantung pada dukungan dan implementasi browser.
Kris
13

Karena islebih umum daripada hasClassdan digunakan filteruntuk memproses ekspresi yang disediakan, sepertinya itu hasClasslebih cepat.

Saya menjalankan kode berikut dari konsol Firebug:

function usingIs() {
for (var i=0; i<10000;i++) {
 $('div#example-0').is('.test');
}
}

function usingHas(){
for (var i=0; i<10000;i++) {
 $('div#example-0').hasClass('test');
}
}

usingIs();
usingHas();

Saya mendapatkan:

  • usingIs: 3191.663ms
  • usingHas: 2362.523ms

Bukan perbedaan yang besar, tetapi mungkin relevan jika Anda melakukan banyak pengujian.

EDIT ketika saya mengatakan 'bukan perbedaan besar, maksud saya adalah Anda perlu melakukan 10.000 siklus untuk melihat 0,8 perbedaan. Saya akan terkejut melihat aplikasi web yang beralih dari iske hasClassakan melihat peningkatan yang signifikan di semua kinerja. Namun, saya akui bahwa ini adalah peningkatan kecepatan 35%.

Dancrumb
sumber
9

Keduanya harus cukup dekat dalam hal kinerja tetapi $('#foo').hasClass('bar');tampaknya lebih mudah dibaca dan secara semantik benar bagi saya.

Darin Dimitrov
sumber
7

.hasClassjauh lebih cepat daripada yang .is bisa Anda uji dari sini . Ubah kasus uji menurut Anda.

Gaurav
sumber