Pertanyaan Apakah atribut data pemilih css lebih cepat daripada pemilih kelas?


Beberapa bulan yang lalu artikel ini menunjukkan bahwa kelas sebenarnya bisa dihindari semuanya bersama-sama dari pengembangan situs web.

Pertanyaan saya adalah, seberapa efisienkah pemilih data dibandingkan dengan pemilih kelas?

Contoh sederhana adalah membandingkan query untuk elemen dengan data-component='something' versus elemen dengan class='class1 class2 something anotherClass'.

Itu [data-<attr>='<value>'] pemilih akan memeriksa nilai secara keseluruhan versus string kelas yang harus dibagi. Dengan pemikiran ini, atribut data harus lebih cepat.

Jadi, untuk memperbaiki pertanyaan, dalam kasus CSS, apakah kita lebih baik dengan pemilih kelas atau pemilih data? Dan dari sudut pandang javascript, akan jQuery("[data-component='something']") lebih efisien daripada jQuery(".something")?


39
2017-09-19 14:30


asal


Jawaban:


Saya tidak akan menyebutnya konklusif, tetapi tampaknya pemilih kelas lebih cepat ... Saya hanya menyatukan ini untuk tes kilat.

http://jsperf.com/data-selector-performance

EDIT:

Berdasarkan Vlad dan tes jsperf saya ... jika kinerja merupakan masalah (terutama IE) ... kelas masih merupakan cara yang tepat


22
2017-09-19 14:52



Setelah memeriksa jawaban BLSully dan halaman uji Dia memberikan, di sini adalah angka yang sebenarnya untuk perbandingan.

kinerja pemilih jQuery kelas vs jQuery data atribut operasi kinerja pemilih per detik:

  • 31% lebih cepat di Chrome 27.0.1453
  • 140% lebih cepat di Firefox 15.0.1
  • 131% lebih cepat di Firefox 21.0
  • 1,267% lebih cepat di IE 9,0
  • 1,356% lebih cepat di IE 10.0

9
2018-05-31 09:38



Saya memiliki kesan bahwa kinerja pemilih cukup cepat sekarang bahkan di peramban seluler di luar sana. Kecuali Anda benar-benar berencana untuk menggunakan banyak pemilih, data-atribut atau berbasis kelas, (dalam hal ini saya akan menyarankan untuk mengunjungi kembali kode Anda untuk mencoba cache pemilih yang sudah ditanya) kita dapat menganggap mereka tidak terlalu buruk. Dan saya bahkan akan mengatakan bahwa tidak dramatis untuk menggunakan gaya di atas yang lain.

Saya pikir vendor browser telah menghabiskan lebih banyak waktu untuk memperbaiki skenario yang paling sering digunakan (query terhadap kelas) daripada query terhadap pemilih. Ini berubah dan saya tidak akan terkejut jika mereka mulai mengoptimalkan kasus lain juga.


4
2017-09-20 08:22



Saya tidak tahu tentang semua jawaban ini tetapi saya menjalankan tes dan atribut saya sendiri lebih cepat.

Anda bisa mencobanya sendiri hanya menghemat waktu di awal, mengerjakan tugas dan mendapatkan waktu akhir kemudian mengerjakan matematika

		var newDate = new Date().getTime(); 
		$('.test-t').removeClass('act');
		$('.t1r').addClass('act');
		var currentDate = new Date().getTime();
		var diff = currentDate-newDate;
		console.log(diff);

		var newDate = new Date().getTime();
		$('.test-t2').attr('this-act','');
		$('.t2r').attr('this-act','1');
		var currentDate = new Date().getTime();
		var diff = currentDate-newDate;
		console.log(diff);


0
2018-05-27 00:59