2011-04-02 29 views
11

Her sınıfın bir önekine sahip birden çok tema çalıştırmak için bir temayı içeren bir JS betiği yapıyorum - bu, sınıf adlarını biraz uzun yapıyor.Uzun CSS sınıfı isimlerinin performans üzerinde bir etkisi var mı?

Ayrıca, özel efektler sağlamak için öğenin daha fazla sınıf adına sahip olmasına bağlı olarak CSS kurallarına da sahibim.

Soruma göre CSS sınıf adları performans üzerinde bir etkiye sahip olacak mı, yoksa yalnızca yanlış/hatalı/seçicisiz kullanımları performansı yavaşlatacak mı?

+0

Facebook'un sınıf isimleri: 'vb buddyListTypeahead',' uiTypeaheadView', 'UIUpcoming_More',' fbPrivacyWidget', 'fbProfileThumbRemoveX',' sideNavSectionContent', –

+0

Šime Vidas @ : Evet, ama ben .wf-default-input-wrapper .wf-default-top-left.wf-default-focus {} gibi giden CSS kuralları var. Bu örnekte ne kadar çok facebook var? – Splynx

cevap

16

Uzun sınıf isimlerinin performans üzerinde kesinlikle bir etkisi olacaktır. Birincisi, transfer edilecek ve ayrıştırılacak daha çok şey olacak. Bununla birlikte ölçülebilir bir etkisi olacak mı? Muhtemelen değil. Aktarım yalnızca bir kez gerçekleşir, önbelleğe alma ve ayrıştırma üzerindeki etkisi sayesinde örnek oluşturma işlemine kıyasla önemsiz olabilir.

Genel olarak, performans sorunları yaşamaya başlarsanız, yalnızca bu tür performans optimizasyonlarını düşünmeye başlamalısınız. Olası performans sorunlarını optimize etmeden önce, css'nizin okunabilirliğini geliştirmek için anlamlı isimler kullanması daha iyidir (aynı kod her türlü için de geçerlidir).

Seçiciler için, bir seçicinin karmaşıklığına ve DOM'ınızın boyutuna bağlı olarak büyük ölçüde (uzun sınıf adlarıyla karşılaştırıldığında dikkate değer ölçüde) kodun çalıştırılması gerekebilir, çünkü bunlar performans üzerinde daha büyük bir etkiye sahip olacaktır. . Ancak, yine de en okunabilir/anlaşılabilir seçiciyi yapmaya çalışın ve ölçülebilir bir performans etkisi varsa onu optimize etmeyi deneyin (profil oluşturmak için firebug veya krom geliştirici araçlarını kullanabilirsiniz).

+8

+ 1 Erken optimizasyonu sağlamak için – derekerdmann

+1

Sorun Başkalarının kullanması için bir eklenti olduğu için, DOM ağacının ne kadar karmaşık veya büyük olduğunun hiçbir fikrim yok. – Splynx

+0

@Splynx: Öyleyse, performanstan gerçekten endişe ediyorsanız, herhangi bir mantıklı varsayımla, herkesin eklentisini kullanacağı maksimum karmaşıklığın ne olduğunu bulmaya çalışın ve daha sonra bu kullanımı ve ölçüm performansını simüle etmeye çalışın. Performans tamam ise (ki eminim ki), iyi olmalısınız. Güvenli tarafta olmak için, daha az optimize edilmiş bir Javascript motoruyla daha eski bir bilgisayar ve daha eski bir tarayıcı kullanabilirsiniz. –

2

uzun CSS classnames performansı üzerinde bir etkisi olmayacaktır, ya seçicileri sadece yanlış/hatalı/verimsiz kullanımı performansını yavaşlatacak?

daha uzun sınıf adları? - Önemli değil sanırım, bazı uygulamaları veya eklentileri ile mümkün değil - PageSpeed ​​ve Y! Yavaş ya da ziyaret ettiğim diğer herhangi bir performans önerisi, bir sorun olarak classname uzunluğunu belirtin - Ama kesinlikle çok daha etkili bütün seçici, daha iyi performans

İlgili konular