JavaScript kimliği + sınıf vs. sınıf seçici performansı

Kimlikli bir öğenin içinde yer alan bir öğe sınıfı seçmek için daha hızlı bir şey olup olmadığını merak ediyorum.JavaScript kimliği + sınıf vs. sınıf seçici performansı

document.GetElementById('list').getElementsByClassName('list')

veya

document.getElementsByClassName('list')

ben farkındayım: Mesela ardından (ve/veya daha iyi uygulama) daha hızlı olan en biz class="list" ile id="list" ve li unsurları içeren bir liste, ul var diyelim Eski, yalnızca #list öğesinin içindeki öğeleri hedefleyecektir, hadi sınıfın tüm belgeye özgü olduğunu varsayalım.

kaynak

2016-03-21 Maciej Krawczyk

İlk olarak bazı tarayıcılarda daha hızlıdır, ancak bilmenin tek bir yolu vardır: profil. –

Bu soru, esas olarak testin gerçeğe dayalı olmasını sağladığı için kanaat temelli değildir. – theoutlander

getElementsByClassName, bir O (n) işlemidir çünkü incelenmekte olan sınıf adının varlığını kontrol etmek için her öğeyi denetlemesi gerekir. Eğer n sınırlı ise, hız artacaktır, ancak hızdaki fark sadece küçük olacaktır, çünkü işlemin genel hızı hala O olacaktır (n).

Sonuç olarak, bu bir mikro optimizasyon örneğidir. Ne de önemli ölçüde daha hızlı. Alt seçicilerin kullanılması, sayfanın şekillendirme parçalarını hız ile ilgili hususlara göre ayırmak için sayfa kompozisyonu ile ilgili olmalıdır.

kaynak

2016-03-21 22:04:16

Muhtemelen 'getElementsByClassName' * O (n) * gibi bir kod yazmak akıllıca olacaktır, ancak tarayıcılar, tek tek DOM başlatma ve güncellemelerinde bu maliyeti etkin bir şekilde amorti eden dahili veri yapılarını tutabilir. – Pointy

@Pointy - Tarayıcının, sayfa yüklenirken doldurulmuş ve sayfa değiştirilirken canlı olarak güncellenen sınıf adına göre dahili bir öğe önbelleği olduğunu mu düşünüyorsunuz? Böyle bir süreci veya yaklaşımı tanımlayan herhangi bir materyale bir bağlantınız var mı? Krom motorunun agresif bir şekilde performansı artırmayı istediğini biliyorum, ancak sahnelerin arkasında kullanılan sınıf adlarını hiç duymadım. –

İnsanlar "DOM yavaştır" dese de, modern tarayıcılar, bir üst öğeden CSS güncellemelerine * gerçekten * neden olan bir ana öğeden bir sınıf ekleme/çıkarma gibi işlemlerde bulunur. Ben bir tarayıcı uygulayıcısı değilim, ama büyük CSS kural kümeleri ve büyük DOM'ları olan bir dünyada, bir şeyler * yapmaları gerekiyor. Ancak itiraf etmeliyim ki sadece yarı eğitimli bir tahminde bulunuyorum. – Pointy

Birincisi, sınıf adlarına göre öğelerin geri alınması o liste öğesine sınırlandırılacağından en hızlı olanı olmalıdır. Ancak, tarayıcının öğeleri dahili olarak nasıl endekslediğine bağlıdır.

Burada bazı kriterler çalıştırabilirsiniz: http://jsperf.com/javascript-select-by-id-vs-by-class

benim testlerde, ikinci yaklaşım krom ve IE hızlıydı, ama FF üzerinde kabaca aynı. Bunun anlamı, sınıf adı ve FF'ye dayanan Chrome ve IE dizin öğelerinin, çoğunlukla, kötü bir işe sahip olmadığı veya bunu yapmadığıdır.

kaynak

2016-03-21 22:13:20 theoutlander

JavaScript kimliği + sınıf vs. sınıf seçici performansı

cevap

İlgili konular