Stil hesaplamalarının kapsamını ve karmaşıklığını azaltma

Jeremy Wagner

Paul Lewis

JavaScript genellikle görsel değişiklikler için bir tetikleyicidir. Bazen bu, daha etkili doğrudan stil manipülasyonları yoluyla ve bazen de hesaplamalar yoluyla değişiklikler yapar arama veya veri sıralama gibi görsel değişikliklere yol açan değişiklikler. Hatalı zamanlanmış veya uzun süre çalışan JavaScript'ler performans sorunlarının yaygın bir nedeni olabilir ve mümkün olduğunca azaltmaya çalışmalısınız.

Stil hesaplaması

Öğe ekleyip kaldırarak, özellikleri, sınıfları, özellikleri ve sınıfları değiştirerek DOM'yi animasyonların oynatılması, tarayıcının öğe stillerini yeniden hesaplamasına neden olur ve sayfanın bir kısmının veya tamamının düzeni. Bu sürece hesaplanan stil hesaplaması.

Tarayıcı, belirli bir öğeye hangi sınıfların, sözde seçicilerin ve kimliklerin uygulanacağını belirler. Ardından, eşleşen seçicilerden gelen stil kurallarını işler ve öğenin son stilleri.

Stil yeniden hesaplama süresi ve etkileşim gecikmesi

Sonraki Boyamayla Etkileşim (INP), kullanıcı odaklı bir çalışma zamanıdır sayfanın kullanıcı girişine genel yanıt verme düzeyini değerlendiren performans metriği. Kullanıcının sayfayla etkileşimde bulunmasından sonraki ana kadarki etkileşim gecikmesini tarayıcı, sonraki kareyi boyayıp sayfaya ilişkin ilgili görsel güncellemeleri kullanıcı arayüzü.

Etkileşimin önemli bir bileşeni, bir sonraki adımı boyamak için gereken zamandır. çerçeve. Sonraki kareyi sunmak için yapılan oluşturma işi birçok parçadan oluşur. sayfa stillerinin hesaplanmasını içerir. Bunlar, düzen, boyama ve bir araya getirilebilir. Bu sayfa stil hesaplama maliyetlerine odaklanmaktadır, ancak Bu da etkileşimle ilgili olan oluşturma aşamasının toplam gecikmeyi (stil hesaplamaları dahil),

Seçicilerinizin karmaşıklığını azaltın

Seçici adlarınızı sadeleştirmek, sayfanızın stilini hızlandırmaya yardımcı olabilir hesaplama. En basit seçiciler, CSS'deki bir öğeye yalnızca sınıf adı:

.title {
  /* styles */
}

Ama bir proje büyüdükçe muhtemelen daha karmaşık CSS'lere ihtiyaç duyacak ve işinizi seçicilerle birlikte aşağıdakine benzer:

.box:nth-last-child(-n+1) .title {
  /* styles */
}

Bu stillerin sayfaya nasıl uygulanacağını belirlemek için tarayıcının sorun "Bu, üst öğesi olan title sınıfına sahip bir öğe mi? box sınıfına sahip eksi-nth-artı-1 alt öğe mi?" Bu sorunu çözmek uzun sürebilir, emin olun. Bunu basitleştirmek için seçiciyi değiştirebilirsiniz: ifadesini girin:

.final-box-title {
  /* styles */
}

Bu yeni sınıf adları garip görünebilir, ancak tarayıcının çok kolaylaştırdık. Örneğin, önceki sürümde tarayıcı tarafından kendisi türünün sonuncusuysa bu öğe, öncelikle tüm dünyayla ilgili başka unsurlardan etkilenip etkilenmediğini nth-last-child olur. Bu, hesaplama işlemi açısından çok daha pahalı olabilir. bir seçiciyi yalnızca sınıfı eşleştiği için bir öğeyle eşleştirme.

Stil özellikleri ayarlanacak öğe sayısını azaltın

Performans konusunda dikkat edilmesi gereken başka bir nokta ve genellikle seçiciden daha önemlidir bir öğe değiştiğinde yapılması gereken iş miktarıdır.

Genel olarak, hesaplanan öğeler stilini hesaplamanın en kötü senaryo maliyeti öğe sayısının seçici sayısıyla çarpımıdır, çünkü tarayıcı her stile göre her öğeyi en az bir kez kontrol etmesi gerekir. şununla eşleşir:

Stil hesaplamaları, geçersiz kılmak yerine birkaç öğeyi doğrudan hedefleyebilir tüm sayfayı kontrol edin. Modern tarayıcılarda bu sorun genellikle daha azdır, çünkü Tarayıcının, bir değişikliğin etkileyebileceği tüm öğeleri her zaman kontrol etmesi gerekmez. Diğer yandan, eski tarayıcılar bu tür görevler için her zaman optimize edilmez. Konum geçersiz kılınan öğe sayısını azaltmanız gerekir.

Stil yeniden hesaplama maliyetinizi ölçme

Stille ilgili yeniden hesaplama işlemlerinin maliyetini ölçmenin bir yolu, paneline gidin. Başlamak için şunları yapın:

1. Geliştirici Araçları'nı açın.
2. Performans sekmesine gidin.
3. Kaydet'i tıklayın.
4. Sayfayla etkileşimde bulunun.

Kaydı durdurduğunuzda aşağıdakine benzer bir resim görürsünüz:

En üstteki şerit, her bir kare için kareleri de gösteren minyatür bir alev grafiğidir. tıklayın. Etkinlik şeridin altına ne kadar yakın olursa çerçeveler tarayıcı tarafından boyanıyor. Flame grafiğinin düzeldiğini görürseniz kırmızı çubuklar görüyorsanız iki nokta da çerçeveleri kullanabilirsiniz.

Kaydırma gibi etkileşimler sırasında uzun süre çalışan kareler daha iyi performans gösterir. görün. Büyük mor bir blok görürseniz etkinliği yakınlaştırın ve Stili Yeniden Hesapla etiketli çalışmayla ilgili stiller içeren yeniden hesaplama işlemine bile neden olabilir.

Etkinliği tıkladığınızda, etkinliğin çağrı yığını gösterilir. Oluşturma işlemi kullanıcı etkileşimi olarak, stil değişikliğini tetikleyen JavaScript'i çağırır. Ayrıca değişimin etkilediği öğe sayısını da gösterir. 900'ün üzerinde öğeleri ve stil hesaplamasının ne kadar sürdüğünü içerir. Tekliflerinizi otomatikleştirmek ve optimize etmek için bu bilgileri kullanarak kodunuzda düzeltme bulmaya çalışın.

Blok, Öğe, Değiştirici'yi kullanma

BEM (Engelleme, Öğe, Değiştirici) gibi kodlama yaklaşımları seçici eşleme performans avantajlarını inceleyin. BEM, her şeyin tek bir sınıfı vardır ve hiyerarşiye ihtiyaç duyduğunuzda da sınıf adına eklenir:

.list {
  /* Styles */
}

.list__list-item {
  /* Styles */
}

Son alt örnekte olduğu gibi bir değiştiriciye ihtiyacınız varsa bu:

.list__list-item--last-child {
  /* Styles */
}

BEM, CSS'nizi düzenlemek için hem bir yapı hem de bir yapı üzerinden iyi bir başlangıç teşvik ettiği stil arama basitleştirmeleri sayesinde,

BEM'yi sevmiyorsanız CSS'nize yaklaşmanın başka yolları da vardır, ancak bunu performanslarını ve ergonomilerini değerlendirin.

Kaynaklar

• Yanıp sönmede stil geçersiz kılma
• BEM (Engelleme, Öğe, Değiştirici)

Markus Spiske'in Unsplash tarafından hazırlanan lokomotif resim.