Peringatan penggunaan jQuery tidak efisien di PHPStorm IDE

100

Saya baru-baru ini meningkatkan versi PHPStorm IDE saya dan sekarang memperingatkan saya tentang penggunaan jQuery yang tidak efisien.

Sebagai contoh:

var property_single_location = $("#property [data-role='content'] .container");

Minta peringatan ini:

Memeriksa apakah penyeleksi jQuery digunakan dengan cara yang efisien. Ini menyarankan untuk memisahkan pemilih turunan yang diawali dengan pemilih ID dan memperingatkan tentang pemilih duplikat yang dapat di-cache.

Jadi pertanyaan saya adalah:

Mengapa ini tidak efisien dan apa cara efisien untuk melakukan selektor di atas?

Saya kira:

var property_single_location = $("#property").find("[data-role='content']").find(".container");

Apakah ini jalan yang benar?

jquery jquery-selectors performance Scott
sumber

Jawaban:

156

Saya memiliki pertanyaan yang sama hari ini dan dapat menemukan solusi berkat Scott Kosman di sini .

Pada dasarnya jawabannya adalah memilih ID satu per satu dan kemudian menggunakan .find(...)apa pun di bawah ini. Jadi ambil contoh Anda:

$("#property [data-role='content'] .container");

Mengubahnya menjadi ini membuat PhpStorm senang dan ternyata bisa dua kali lebih cepat :

$("#property").find("[data-role='content'] .container");
MikeSchinkel
sumber
1
Untuk selera saya $ ('[data-role = "content"] .container', '#property'); lebih mudah dibaca.
n3
26
@ n3rd Lucu, saya tidak menemukan pendekatan itu dapat dibaca sama sekali, tetapi untuk masing-masing pendekatannya sendiri, kata mereka.
MikeSchinkel
19

Saya percaya perbedaan antara kedua metode saat menggunakan versi terbaru jQuery dan browser dapat diabaikan. Saya membuat tes yang menunjukkan bahwa sekarang sebenarnya 10% lebih cepat untuk melakukan selektor gabungan daripada pemilihan pada id dan kemudian menemukan kasus yang sangat sederhana:

http://jsperf.com/jquery-find-vs-insel

Untuk pemilihan beberapa anak berdasarkan kelas pada kedalaman apa pun, "temukan" tampaknya lebih cepat:

http://jsperf.com/jquery-find-vs-insel/7

Ada beberapa diskusi tentang ini di forum jQuery, tetapi sudah 3 tahun: https://forum.jquery.com/topic/which-jquery-selection-is-efficient Seperti yang mereka tunjukkan di sini, jika Anda melakukan banyak operasi pada pemilih id yang sama, peningkatan kinerja terbesar ditemukan dengan menyimpan elemen tingkat atas. Di sisi lain, jika Anda melakukan hanya beberapa pilihan, hampir tidak akan ada perbedaan kinerja.

Oleh karena itu, saya yakin IntelliJ melebih-lebihkan pentingnya gaya kode ini.

Leonya
sumber
4
Dalam tes pertama Anda, Anda menggunakan pilihan meninggal langsung ">". Saya menjalankan pengujian pertama Anda tanpa ">", dan menggunakan "temukan" lebih cepat. jsperf.com/jquery-find-vs-insel/12
beardedlinuxgeek
Hal yang saya temukan tentang ini paling menarik adalah bahwa versi terbaru Safari memproses metode langsung tercepat sekitar 25%. Saya tidak tahu apa yang telah mereka lakukan, tetapi tampaknya semua browser lain belum memahaminya.
Uxonith
14

Pertanyaan pertama adalah menekan Alt + Enter, dan pilih tip pertama dalam daftar, lalu tekan Enter, Anda akan melihat cara yang menurutnya paling efisien.

UnixAgain
sumber