Soru Çok fazla sayıda kimlik performansa zarar veriyor mu?


Gereksiz yere sayfam varsa idgibi elemanlar üzerinde HTML Helper içinde ASP.Net-MVC.
Kimlik seçicilerin performansını azaltıyor mu? (Çok fazla eleman yüklü bir sayfam var)

Örnek:

// First DOM   
<HTML>
...
    <input type="text" value="first" id="useless" />
    <input type="text" value="second" id="useful" />
</HTML>

// Second  DOM  
<HTML>
...
    <input type="text" value="first"/>
    <input type="text" value="second" id="useful" />
</HTML>

Senaryo:

<script>
    alert($('#useful').val());
    // never select the first element (with the useless id)
</script>

18
2018-02-08 12:27


Menşei


Performans soruları her zaman zor olmaktadır, çünkü uygulamalar arasında bir çeşitlilik olabilir. Genelde burada cevapları kabul ediyorum. Ekleyebildiğim tek şey, Chrome ve IE gibi bazı tarayıcıların kimlikleriyle tüm öğelerin global değişken olarak tanımlanabilmesidir. (veya genel nesne üzerindeki özellik)Daha fazla küresel kargaşa ile sonuçlanır. Yani, sayısal bir varyasyon dışında, aynı şekilde etkili olan binlerce kimlikten bahsediyorsanız, yaklaşımınızı tekrar gözden geçirmeniz gerekebilir. Aksi halde çok fazla terlemezdim. :)


Cevaplar:


Kısa cevap, hayır.

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Birkaç ay sonra verimsiz CSS seçicilerinin performans etkisi hakkında bazı yazılar vardı. İlgi duydum - bu, yaşadığım tarayıcıya özgü bir davranış türüdür. Daha fazla araştırmayla, CSS seçicilerini daha verimli hale getirme zamanının geldiğinden emin değilim. Daha da ileri gideceğim ve kimsenin yarın uyandığımızda ve her web sayfasının CSS seçicilerinin büyülü bir şekilde optimize edilmiş olduğunu fark edeceğini sanmıyorum.

Testi şu şekilde revize ettim:

  • 2000 çapa ve 2000 kuralları (20.000 yerine) - bu aslında P, DIV, DIV, DIV'deki tüm yuvalama nedeniyle ~ 6000 DOM öğesinde sonuçlanır.
  • Temel sayfa ve etiket seçici sayfası, tıpkı diğer tüm sayfalar gibi 2000 kurallarına sahiptir, ancak bunlar, sayfadaki herhangi bir sınıfla eşleşmeyen basit sınıf kurallarıdır

Bu testleri 12 tarayıcıda çalıştırdım. Sayfa oluşturma süresi, sayfanın üst ve alt tarafındaki bir komut dosyası bloğuyla ölçülmüştür. (Yığılmış kodlamadan olası etkiyi önlemek için sayfayı yerel diskten yükledim.) ...

Bu testlere dayanarak şu hipoteze sahibim: Çoğu web sitesi için, CSS seçicilerinin optimizasyonundan elde edilecek olası performans kazançları küçük olacaktır ve maliyete değmez. Bazı sayfalarda CSS kuralları ve JavaScript ile bir sayfa fark edilir şekilde daha yavaş etkileşimde bulunabilen etkileşimler vardır. Odağın nerede olması gerektiği ...


17
2018-02-08 12:29



Eklenen not: JS etkinliklerini söz konusu tüm seçicilere bağlamazsanız, performans isabetleri minimum düzeyde olur. - Barry Chapman


JQuery yerel ortama yedeklendiğinden, bir kimlik seçmek son derece hızlıdır.

 document.getElementById

işlevi. Yine de, bunları sıkça kullanıyorsanız (bunları bir değişkene kaydedin) seçicilerinizi önbelleğe alabilirsiniz.


5
2018-02-08 12:30



Cevap hayır. Çok hızlı olduğu için, bunun için endişelenmenize gerek yok. - knub


JavaScript performansı etkilenmezken, binlerce kimlik HTML'nizi büyütür, yükleme süresini ve trafik maliyetini artırır. Muhtemelen ihmal edilebilir (görüntüleri ve diğer kaynakları sıkıştırmak çok daha önemlidir), ancak yine de optimizasyon için bir yol olabilir.


2
2018-02-08 12:34





Öğeleri seçerek İD jQuery'de, sayfada birçok öğe varsa, performans isabeti almayacak birkaç seçiciden biridir.

Öte yandan, sınıf veya özellik değerine dayalı öğeleri seçiyor olsaydınız, önemli bir performans isabeti görürsünüz. Performanstan endişe ediyorsanız, seçicileri tekrar kullanım için değişkenlerde saklayarak jquery seçicilerinizi önbelleğe aldığınızdan emin olun.

var element = $("#specificElement");
console.log(element.val());

1
2018-02-12 07:34