CSS oluşturma performansını endişesi değer mi?Ya biz sadece CSS ile verimliliği hakkında endişe ve sadece şık ya da sürdürülebilir CSS yazma odaklanmak yerine, değil mi?

Bu soru ön uç üzerinde CSS parçaları aslında cihaz performansı üzerinde önemli bir etkisi olabilir geliştiriciler için yararlı bir kaynak olması amaçlanmıştır, ve tarayıcılar ya da motor / hangi etkilenebilir. Budeğilzarif ya da sürdürülebilir CSS yazma hakkında bir soru, sadece performans burada yazıyor umarım en iyi uygulama üzerinde daha genel makaleler bilgilendirebilir rağmen).

Kanıtlar mevcut

Google Mozilla verimli CSS yazma yönergeleri yazdım ve CSSLint's set of rules içerir:

Düzenli ifadeler gibi seçiciler önlemek .. karmaşık eşitlik operatörleri performans ceza önlemek için kullanmayın

ama bunların hiçbiri herhangi bir kanıt bulamadım) bu etkisini sağlamak.

3* *Bu gün bizim almamız gereken bir css-tricks.com article on efficient CSS savunuyor (verimliliği en iyi uygulamalar bir sürü özetleyen sonra).

perfection kills blog post border-radius box-shadow büyüklük açısından daha basit CSS kuralları daha yavaş işlenen önerdi. Bu son derece Opera motoru önemli, ama aynı zamanda Y önemsiz oldu. Ayrıca, smashing magazine CSS benchmark CSS3 görüntülemek kuralları için zaman işleme önemsiz ve eşdeğer etkisi görüntüleri kullanarak görüntü oluşturma önemli ölçüde daha hızlı olduğunu gördüm.

Biliyorum cep tested various mobile browsers ve buldum hepsi işlenmiş CSS3 eşit bundan dolayı hızlı (12ms) ama görünüşe göre yaptıkları testlerde bir PC, o yüzden veremeyiz anlaması konusunda bir şey elle tutulan cihazlar ile gerçekleştirmek CSS3 genel olarak.

* *34 35* articles *verimli CSS yazmak için internette var. Ancak, henüz kötü olarak kabul CSS aslında bir olan herhangi bir kapsamlı kanıt bulmam lazımönemliişleme zamanında darbe veya bir site snappiness.

Arka plan

Bu soru için ödül BÖYLECE topluluğun gücünü kullanmak için iyi araştırılmış yararlı bir kaynak oluşturmak için denemek için önerdim.

---

Ne kadar zeki değildir rendering engine kullanıyorsun? burada akla gelen ilk şey:

Bu, kulağa geldiği genel, CSS oluşturma/seçim etkinliğini sorgularken çok önemli. Örneğin, CSS dosyanızın ilk kural olduğunu varsayalım:

.class1 {
    /*make elements with "class1" look fancy*/
}

Bu yüzden bir çok temel motor gördüğü (ve o zamandan beri bu ilk kural), gider ve bakıyor her eleman içinde DOM ve çekler için varlığı class1 her. Daha iyi motorlar muhtemelen DOM öğeleri listesi için classnames göster ve karma tablo için verimli bir arama gibi bir şey kullanın.

.class1.class2 {
    /*make elements with both "class1" and "class2" look extra fancy*/
}

Bizim örnek motor" ve DOM, her öğe, her iki sınıf için, o tekrar ederdi. "temel Zeki bir motoru karşılaştırmak n('class1') n('class2') n(str) Sayı unsurları DOM ile sınıf str ve alır hangisi en az; sanırım bu class1, sonra geçer tüm unsurları ile class1 arayan elemanlar var class2 de.

Her durumda, modern motorlar zeki (şekilde tartışılan yukarıdaki örnekte, daha zeki ve parlak yeni işlemciler milyonlarca (on milyonlarca) işlemleri ikinci yapabilir. DOM öğeleri milyonlarca olması çok düşük bir olasılık, herhangi bir seçim için en kötü durum performansı (O(n)) çok kötü neyse olmayacak.

Güncelleme:

Bazı gerçek pratik görsel kanıt elde etmek için, bazı testler yapmaya karar verdim. Öncelikle, bir fikir hakkında kaç DOM elemanları ortalama görebiliriz gerçek dünya uygulamaları, hadi bir göz atın kaç eleman bazı popüler sitelerin sayfaları vardır:

Facebook:~1900 unsurları (kişisel ana sayfasında test).Google: ~340 elemanları (Ana Sayfa, arama sonuçları üzerinde test).Google:~950 elemanları (arama sonuç sayfası üzerinde test).Yahoo!: 1400 ~elemanları (ana sayfada test).Stackoverflow:~680 unsurlar (soru sayfa üzerinde test).AOL:~1060 elemanları (ana sayfada test).Wikipedia:Eleman ~6000 spans ya anchors (Wikipedia article about Glee Test) değil.Twitter:~270 elemanları (ana sayfada test).

O özetle, ~1500 elemanlarının ortalama alıyoruz. Şimdi bazı testler yapmak zamanı geldi. Her test için, 1500 divs (bazı testler için divs başka bir iç içe), uygun niteliklerini test bağlı olarak her oluşturdum.

Testler

Stilleri ve öğeleri PHP kullanarak oluşturulur. Diğerleri yerel olarak test edebileceği şekilde kullandım, ve bir dizin oluşturulan PHPs yükledim,: little link.

Sonuçlar:

Her test üç tarayıcılar (ortalama süre bildirilir) 5 kez yapıldıFirefox 15.0(A),Krom 19.0.1084.1(B),Internet Explorer 8(C):

                                                                        A      B      C
1500 class selectors (.classname)                                      35ms   100ms  35ms
1500 class selectors, more specific (div.classname)                    36ms   110ms  37ms
1500 class selectors, even more specific (div div.classname)           40ms   115ms  40ms
1500 id selectors (#id)                                                35ms   99ms   35ms
1500 id selectors, more specific (div#id)                              35ms   105ms  38ms
1500 id selectors, even more specific (div div#id)                     40ms   110ms  39ms
1500 class selectors, with attribute (.class[title="ttl"])             45ms   400ms  2000ms
1500 class selectors, more complex attribute (.class[title~="ttl"])    45ms   1050ms 2200ms

Benzer deneyler:

Görünüşe göre insanlar benzer deneyler yapmış; bu da bazı faydalı istatistikler vardır: * * * 40*. Alt satırında:İşleme (1ms = 0.001 s), Bu çok fazla uğraşma zaman birkaç milisaniye tasarruf önemsediğin sürece. Öte yandan, iyi bir uygulama bazı belirgin fark yaratabilir gibi unsurlar büyük kümeleri seçmek için karmaşık seçiciler test sonuçları yukarıda görüldüğü gibi () kullanmaktan kaçının. Tüm ortak CSS seçiciler modern tarayıcılarda oldukça hızlı.

Sayfa sohbet ve stil için tüm iletileri istediğiniz bir bina olduğunuzu düşünün. Her mesaj title ve a sınıf .chatpage 24 *iç içe olan* 22 *bir yer olduğunu biliyorsun.doğru.chatpage div[title] iletileri seçmek için kullanmak, ama etkinliği-bilgeliğin de kötü. Daha basit, daha rahat ve daha verimli tüm iletileri ders vermesi ve onları bu sınıfı kullanarak seçin.

Fantezi oyunu sonuç:

"Evet, bu CSS anlam" dır . sınırları içinde bir şey ^em>Tamam.