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

JavaScript genellikle görsel değişiklikler için bir tetikleyicidir. Bazen bu, daha etkili değişiklikleri doğrudan stil manipülasyonlarıyla ve bazen de hesaplamalar yoluyla 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 stil hesaplaması yapılmalıdır.

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.

Stili yeniden hesaplamanın etkileşim gecikmesindeki rolü

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 kılavuz stil hesaplama maliyetlerine odaklanmaktadır, ancak etkileşimin toplam oluşturma süresinin herhangi bir kısmı da toplamını azaltır

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

CSS seçicileri sadeleştirmek, sayfanızın stil hesaplamalarını hızlandırmaya yardımcı olabilir. En basit seçiciler, CSS'deki bir öğeye yalnızca sınıf adını içeren bir referans verir:

.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 "Bu, title sınıfına sahip bir öğe mi ve şu sınıfın üst öğesi mi: box, üst öğesinin eksi-n'inci +1 alt öğesi olur mu? Anlıyorum tarayıcı için biraz zaman alabilir. Bu işlemi basitleştirmek için daha belirli bir sınıf adı seçin:

.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 adına dayanarak 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

Stili yeniden hesaplama maliyetini ölçmenin birkaç yolu vardır: tarayıcı. Her biri, tarayıcıda ölçmek isteyip istemediğinize bağlıdır. veya bu sürecin ne kadar sürdüğünü ölçmek istiyorsanız daha iyi anlamanızı sağlayabilir.

Chrome Geliştirici Araçları'nda stil yeniden hesaplama maliyetini ö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. Seçici istatistikleri onay kutusunu işaretleyin (isteğe bağlı).
  4. Kaydet'i tıklayın.
  5. Sayfayla etkileşimde bulunun.

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

Stil hesaplamalarını gösteren Geliştirici Araçları.
Stil hesaplamalarını gösteren bir Geliştirici Araçları raporu.

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.

Yakınlaştırılıyor
    Chrome Geliştirici Araçları'nda, doldurulan formların etkinlik özetindeki
    Chrome Geliştirici Araçları'ndaki performans panelini açın.
Geliştirici Araçları etkinliğinde uzun süre çalışan kareler özet.

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.

Neleri
    gibi hayati bilgileri de içeren uzun süreli stil hesaplamalarının ayrıntıları
    göre değişir.
Stille ilgili yeniden hesaplama işlemi, Geliştirici Araçları özetinde 25&nbspms.nin üzerinde.

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. Bunu kullanabilirsiniz bilgi edinin.

Seçici istatistikleri onay kutusunu işaretlediyseniz önce Performans Paneli ayarlarında, ardından en alt panelinde aynı ada sahip ek bir sekme bulunur.

CSS seçici istatistik tablosu
    Chrome Geliştirici Araçları'nın performans panelinde görünür. Bu tabloda
    geçen süre, eşleşme vb. için başlıkları ve ilgili verileri
    denemeler, eşleşme sayısı, eşleşmeyen düğümlerin yüzdesi, seçiciler ve
    stil sayfasını oluşturun.
Chrome'un performans panelinde gösterilen seçici istatistikleri tablosu Geliştirici Araçları'nı tıklayın.

Bu panel, her bir seçicinin göreli maliyeti hakkında yararlı veriler sağlar. Pahalı CSS seçicileri belirlemenize yardımcı olur.

Daha fazla bilgi için CSS Seçici İstatistikleri dokümanlarına bakın.

Gerçek kullanıcılar için stil yeniden hesaplama maliyetini ölçme

Bir site için stil yeniden hesaplamanın ne kadar sürdüğünü merak ediyorsanız Long Animation Frames API'den yararlanıyorsanız bunun için gereken araçları size sunar. Bu API'daki veriler web-vitals JavaScript kitaplığı, Örneğin, stil yeniden hesaplama süresi dahil.

Bir etkileşimin sunum gecikmesinin birincil faktör olduğundan şüpheleniyorsanız bir sayfanın INP'sine katkıda bulunmak istiyorsanız, bu sürenin ne kadar için zaman harcadım. Daha fazla bilgi için Alanda stil yeniden hesaplama süresinin nasıl ölçüleceği.

Kaynaklar

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