Akılda Performans ile Daha İyi CSS Nasıl Yazılır

Bugünün yayınında, iyileştirilmiş site performansı için CSS’de yapabileceğimiz kod seçeneklerine karar vereceğiz. Ancak, bu seçimlere girmeden önce, ilk önce odaklanmak için web sayfası oluşturma iş akışına kısa ve yakından bakalım.CSS ile çözülebilen problemli (performans açısından) alanlar.

İşte DOM ağacı oluşturulduktan sonra tarayıcı tarafından gerçekleştirilen işlemlerin kaba akışı:

Stili Yeniden Hesapla (ve ağaç oluşturulmasını sağla). Tarayıcı, DOM ağacındaki öğelere uygulanacak stilleri hesaplar. Bir render ağacı daha sonra, düğümleri (elemanlar) DOM ağacından işlenemeyen (elemanlarla) atarken oluşturulur. görüntü yok) ve olanlar (sözde unsurlar).
Düzen (aka Reflow). Önceden hesaplanan stili kullanarak, tarayıcı sayfadaki her bir öğenin konumunu ve geometrisini hesaplar.
yeniden boyamak. Düzen eşlendikten sonra, pikseller ekrana çizilir.
Kompozit Katmanlar. Yeniden boyama sırasında, resim bağımsız olarak farklı katmanlarda yapılabilir; bu katmanlar nihayet bir araya getirilir.

Şimdi daha iyi performans gösteren CSS kodları yazmak için işlemin ilk üç aşamasında neler yapabileceğimize devam edelim..

1. Stil Hesaplamalarını Azaltın

Daha önce de belirtildiği gibi, "Recalculate Style" aşamasında, tarayıcı öğelere uygulanacak stilleri hesaplar. Bunu yapmak için tarayıcı önce CSS’deki DOM seçicisinde belirli bir eleman düğümüne işaret eden tüm seçicileri bulur. Daha sonra, bu seçicilerdeki tüm stil kurallarını gözden geçirir ve hangi öğeye gerçekten uygulanacağına karar verir..

Pahalı stil hesaplamalarını önlemek için, karmaşık ve derinlemesine yerleştirilmiş seçicileri azaltma böylece tarayıcının bir seçicinin hangi öğeye gönderme yaptığını bulması daha kolay olur. Bu hesaplama süresini azaltır.

Kullanmanın diğer yolları arasında stil kurallarının sayısını azaltmak (nerede mumkunse), kullanılmayan CSS’yi kaldırma ve kaçınma fazlalık ve geçersiz kılmalar, Böylece, stil hesaplamaları sırasında tarayıcının aynı stile tekrar tekrar girmesi gerekmez..

2. Reflows azaltın

Bir öğedeki yeniden akışlar veya Düzen değişiklikleri çok "pahalı" işlemlerdir ve düzen değişikliklerinden geçen öğenin önemli miktarda alt öğesi olduğunda, bunlar daha büyük bir sorun olabilir Hiyerarşiyi basamağa aşağı doğru yönlendirir).

Reflows, height veya font boyutu gibi geometrik özelliklerde değişiklik yapılması, sınıfların öğelere eklenmesi veya kaldırılması, pencere yeniden boyutlandırılması, aktif hale getirilmesi : hover, DOM JavaScript, vb. İle değişiyor.

Tıpkı stil hesaplamasında olduğu gibi, Reflows'i azaltmak için, karmaşık seçicilerden kaçının ve derin DOM ağaçları (yine, bu, Reflows’in aşırı kademelenmesini önlemek içindir).

Sayfanızdaki bir bileşenin düzen stillerini değiştirmeniz gerekiyorsa, elementlerin hiyerarşisinde en düşük olan elementin stillerini hedefleyin Bileşenin yapıldığı. Bu, düzen değişikliklerinin başka herhangi bir Yeniden Akış'ı tetiklememesi (neredeyse).

Düzen değişikliklerinden geçen bir öğeyi canlandırıyorsanız, sayfa akışından çıkar tarafından absoutely konumlandırma, Kesinlikle konumlandırılmış öğelerdeki yeniden akıtma, sayfadaki diğer öğeleri etkilemeyeceğinden.

Özetle:

Düzen değişikliği yaparken DOM ağacında daha düşük olan hedef öğeleri
Düzen değiştirme animasyonları için kesinlikle konumlandırılmış öğeler seçin
Mümkünse, mizanpaj özelliklerini canlandırmayın

3. Repaints azaltın

Yeniden boyama, ekrandaki piksellerin çizilmesini ifade eder ve Reflow gibi pahalı bir işlemdir. Repaints, Reflows, page scroll, renk, görünürlük ve opaklık gibi özelliklerdeki değişiklikler ile tetiklenebilir..

Sık ve çok büyük repaints önlemek için, Pahalı yeniden boyamaya neden olan özelliklerden daha azını kullanmak gölgeler gibi.

Doğrudan veya dolaylı olarak Repaint'i tetikleyebilecek bir öğenin özelliklerini canlandırıyorsanız, büyük avantajı olacaktır. eğer bu eleman kendi katmanındaysa boyama işlemcisinin sayfanın geri kalanını etkilemesini ve donanım ivmesini tetiklemesini engeller. Donanım kullanımında GPU, katmandaki animasyon değişikliklerini gerçekleştirme görevini üstlenecek ve süreci hızlandırırken CPU'nun fazladan çalışmasını sağlayacak.

Bazı tarayıcılarda, opaklık (değeri daha küçük olan 1) ve dönüştürmek (dışında değer Yok) otomatik olarak yeni katmanlara yükseltilir ve animasyonlar ve geçişler için donanım ivmesi uygulanır. Animasyonlar için bu özellikleri tercih etmek böylece iyi.

Zorlamak bir elemanı yeni katmana tanıtmak ve donanım ivmesini almak Animasyon için, icat edilmiş iki teknik vardır:

eklemek dönüşüm: translate3d (0, 0, 0); Öğeye, tarayıcıyı animasyonlar ve geçişler için donanım ivmesini tetiklemek üzere kandırmak.
ekle değişecek öğede değişmesi muhtemel özelliklerin tarayıcısını bildiren öğenin mülkü,. Not: Sara Soueidan'ın Dev.Opera sitesinde bu konuda derin ve süper yararlı bir makalesi var.

Özetle:

Repaints'e neden olan pahalı stillerden kaçının
Ağır animasyonlar ve geçişler için katman tanıtımı ve donanım ivmesi isteyin.

Not al

(1) Şimdiye dek, CSS dosya boyutunun küçültülmesine değinmedik. Stil kurallarındaki (ve DOM öğelerindeki) düşüşün, tarayıcının ne kadar çalışması gerekecek az stilleri hesaplama sürecinde. Bu kod azaltmanın bir sonucu olarak, daha iyi seçiciler yazmak ve kullanılmayan CSS'lerin silinmesi, dosya boyutu otomatik olarak azalacak.

(2) Ayrıca tavsiye edilir Bir öğenin stilinde JavaScript’te fazla sayıda değişiklik yapamazsınız. Bunun yerine, bu değişiklikleri yapmak için yeni stilleri tutan öğeye (JavaScript kullanarak) bir sınıf ekleyin - bu gereksiz Yeniden Akışları önler.

(3) isteyeceksiniz Düzen Thrashing'i önlemek ayrıca, JavaScript kullanarak öğelerin Mizanpaj özelliklerine erişme ve bunları değiştirme nedeniyle ortaya çıkan (zorunlu senkron Akışlar). Bunun performansı nasıl düşürdüğü hakkında daha fazla bilgi edinin..