CSS Seçici performans, DOM Ayrıştırma

Question

Soruma soru sormak DOM ayrıştırma tetiklendi, neden bir Sınıf seçiciden daha CSS Kimlik seçicisi kullanmakta daha hızlı olduğunu bilmek isterim. Ne zaman DOM ağacı tekrar ayrıştırılması ilgisi var ve ne hileler ve performans geliştirmeleri ben de ... kullanmalıyım, birisi bana ben

var $p = $("p"); 
$p.css("color", "blue"); 
$p.text("Text changed!"); 

yerine

$("p").css("color", "blue"); 
$("p").text("Text changed!"); 

gibi bir şey yaparsanız performansı artırır, tüm tarayıcılar için bu doğru mu? Ayrıca, DOM ağacımın yeniden ayrıştırılıp ayrılmadığını nasıl bilebilirim?

Answer 1

Bir #id seçicisi, sınıf seçicilerinden daha hızlıdır, çünkü: (a) yalnızca belirli bir kimlik değerine sahip bir öğe olabilir; (b) tarayıcılar bir harita id -> element tutabilir, böylece #id seçicisi tek harita araması kadar hızlı çalışabilir.

Sonraki ilk seçenek, sen Chrome Geliştirici Araçları'nı kullanabilirsiniz böylece 2.

Son kat toplam seçici tabanlı arama süresini azaltarak, ikinci aramasını önler olarak, daha hızlı kesinlikle yukarıda önerilen Seçici Profiler (Profiller paneli olarak) o sayfanıza seçiciler işlemek için bir tarayıcı süresini profil (maç + eşleştirme elemanlarına stilleri uygulamak.)

Answer 2

Ben kendi performans testlerini yapmak için teşvik ne zaman bir şüphen varsa Bunun nasıl yapılacağı hakkında daha fazla bilgi edinebilirsiniz: How do you performance test JavaScript code?. Performansı kendiniz test ettikten sonra, sonuçları asla unutmayacaksınız. Özellikle, bir jquery selektörü üzerindeki $() işlevinin yürütülmesi, eşleşen DOM düğümlerini edinmelidir. Bunun nasıl çalıştığından tam olarak emin değilim ama sanırım bu, document.getElementById(), document.getElementsByTagName() ve diğerlerinin birleşimidir. Bu işlemin maliyeti, ne kadar küçük olursa olsun, sadece bir kez çağırır ve tekrar kullanırsanız, işlem zamanından tasarruf edersiniz.

Answer 3

Kimlik seçici, bir sınıf seçiciden daha hızlıdır, çünkü bir kimliğe sahip yalnızca bir öğe vardır, ancak birçok öğe bir sınıfı paylaşabilir ve aranması gerekir.

o yavaş olacaktır tabii böylece aşağıdaki kod gereksiz iki kez DOM ayrıştırma: Tek başına

$("p").css("color", "blue"); 
$("p").text("Text changed!");