jQuery: Apakah kekhususan pemilih meningkatkan kinerja dengan delegasi .on()?

Kekhususan membantu… sedikit.

Menurut pengujian JSPerf ini, menambahkan kekhususan pada pemilih di contoh yang diposting secara konsisten meningkatkan kinerja dalam pengujian berulang, namun peningkatan tersebut dapat dianggap dapat diabaikan pada tingkat interaksi pengguna di mana peristiwa terjadi secara sporadis dalam pengulangan yang relatif kecil.

Dalam beberapa pengujian, perbedaannya cukup kecil dan berada dalam batas kesalahan sehingga dianggap setara secara statistik.

Pemfilteran pemilih di handler menyakitkan

Namun hasil yang paling mengejutkan adalah pengujian tambahan ketiga yang disarankan oleh salah satu pemberi komentar di atas yang mengeluarkan :has() dari pemilih dan menggantikannya dengan tanda .has() pada fungsi panggilan balik, yang secara konsisten bekerja lebih lambat dibandingkan menggunakan :has() pada pemilih — sering kali dengan 100 operasi per detik atau lebih.

Hal ini bisa dibilang tidak terlalu bisa diabaikan dan sangat luar biasa mengingat dokumentasi jQuery untuk :has() menunjukkan bahwa Anda harus mengharapkan kinerja yang lebih baik di sini:

Karena :has() adalah ekstensi jQuery dan bukan bagian dari spesifikasi CSS, kueri yang menggunakan :has() tidak dapat memanfaatkan peningkatan kinerja yang disediakan oleh metode DOM querySelectorAll() asli. Untuk kinerja yang lebih baik di browser modern, gunakan $( "your-pure-css-selector" ).has( selector/DOMElement ) sebagai gantinya.

Saya tidak meragukan bahwa dalam pernyataan pemilih di mana .has() hanya digunakan untuk mengurangi kumpulan elemen yang cocok, seseorang dapat mengharapkan kinerja yang lebih baik; tapi saya curiga penurunan kinerja yang ditunjukkan dalam pengujian adalah hasil dari pelanggaran konvensi itu dengan memindahkan pemeriksaan .has() ke dalam pengendali peristiwa di mana data peristiwa sedang diedarkan, objek jQuery baru sedang dibuat dari this, dan .length sedang diakses dan diperiksa dalam pernyataan if.

Formulasi tes

Untuk merumuskan pengujian, tiga tolok ukur pengikatan peristiwa dikonfigurasikan dan diterapkan ke markup HTML yang sama, kemudian kasus pengujian pemicu peristiwa yang sama — menyimulasikan pengguna mengarahkan mouse ke berbagai elemen yang didelegasikan dan tidak didelegasikan di layar — diterapkan ke masing-masing elemen. tiga tolok ukur untuk perbandingan.

Tolok ukur 1:

    $('.foo').on('mouseenter', ':has(.other)', function(e) {
      console.log(e);
    });

Tolok ukur 2:

    $('.foo').on('mouseenter', 'button:has(.other)', function(e) {
      console.log(e);
    });

Tolok ukur 3:

    $('.foo').on('mouseenter', 'button', function(e) {
      if ($(this).has('.other').length) {
        console.log(e);
      }
    });

HTML:

<div class="foo">
    <button type="button" id="A">some text</button>
    <button type="button" id="B"><span class="other">some text</span></button>
    <div id="C">some text</div>
</div>

Kasus uji:

$('#A').trigger('mouseenter');
$('#B').trigger('mouseenter');
$('#C').trigger('mouseenter');