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

JavaScript genellikle görsel değişikliklerin tetikleyicisidir. Bazen doğrudan stil manipülasyonları aracılığıyla, bazen de verileri arama veya sıralama gibi görsel değişikliklere yol açan hesaplamalar yoluyla bu değişiklikler yapılır. Yanlış zamanlanmış veya uzun süre çalışan JavaScript, performans sorunlarının yaygın bir nedeni olabilir. Mümkün olduğunda bu sorunun etkisini en aza indirmeye çalışmalısınız.

Stil hesaplama

Öğe ekleyip kaldırarak, özellikleri, sınıfları değiştirerek veya animasyonları oynatarak DOM'nin değiştirilmesi, tarayıcının öğe stillerini ve çoğu durumda sayfanın bir kısmının veya tamamının düzenini yeniden hesaplamasına neden olur. Bu işleme stil hesaplama denir.

Tarayıcı, belirli bir öğe için hangi sınıfların, sözde seçicilerin ve kimliklerin geçerli olduğunu belirlemek üzere eşleşen bir dizi seçici oluşturarak stilleri hesaplamaya başlar. Ardından, eşleşen seçicilerden gelen stil kurallarını işler ve öğenin son stillerine karar verir.

Stil yeniden hesaplamanın etkileşim gecikmesindeki rolü

Interaction to Next Paint (INP), bir sayfanın kullanıcı girişine genel olarak yanıt verme oranını değerlendiren, kullanıcı odaklı bir çalışma zamanında performans metriğidir. Kullanıcının sayfayla etkileşime geçtiği andan tarayıcının, kullanıcı arayüzündeki ilgili görsel güncellemeleri gösteren bir sonraki kareyi boyamasına kadar geçen süreyi ölçer.

Etkileşimin önemli bir bileşeni, sonraki karenin boyanması için geçen süredir. Sonraki kareyi sunmak için yapılan oluşturma çalışmaları, düzen, boyama ve birleştirme çalışmalarından hemen önce gerçekleşen sayfa stillerinin hesaplanması da dahil olmak üzere birçok parçadan oluşur. Bu kılavuzda stil hesaplama maliyetlerine odaklanılır ancak etkileşimin toplam oluşturma süresinin herhangi bir bölümünün azaltılması, toplam gecikmesini de 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'de bir öğeye yalnızca sınıf adıyla referans verir:

.title {
  /* styles */
}

Ancak her proje büyüdükçe daha karmaşık CSS'ye ihtiyaç duyabilir ve aşağıdaki gibi seçicilerle karşılaşabilirsiniz:

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

Bu stillerin sayfaya nasıl uygulandığını belirlemek için tarayıcının "Bu, üst öğesinin n. alt öğesinden sonraki 1. alt öğesi olan box sınıfına sahip bir title sınıfına sahip bir öğe mi? Tarayıcının bunu tespit etmesi biraz zaman alabilir. Bunu basitleştirmek için seçiciyi daha spesifik bir sınıf adı olacak şekilde değiştirebilirsiniz:

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

Bu yeni sınıf adları garip görünebilir, ancak tarayıcının işini çok daha basitleştirir. Örneğin, önceki sürümde tarayıcının bir öğenin türünün son öğesi olduğunu bilmesi için önce kendisinden sonra gelen öğelerin nth-last-child olup olmadığını belirlemek üzere diğer tüm öğelerle ilgili her şeyi bilmesi gerekir. Bu, bir seçiciyi yalnızca sınıf adı temel alınarak bir öğeyle eşleştirmekten çok daha pahalı olabilir.

Stil uygulanan öğelerin sayısını azaltın

Performans açısından dikkate alınması gereken bir diğer nokta (ve genellikle seçici karmaşıklığından daha önemli olan) bir öğe değiştiğinde yapılması gereken çalışma miktarıdır.

Genel anlamda, hesaplanan öğe stilini hesaplamanın en kötü senaryosu, öğe sayısının seçici sayısıyla çarpımıdır, çünkü tarayıcının eşleşip eşleşmediğini görmek için her bir öğeyi her stile göre en az bir kez kontrol etmesi gerekir.

Stil hesaplamaları, sayfanın tamamını geçersiz kılmak yerine birkaç öğeyi doğrudan hedefleyebilir. Tarayıcının, bir değişikliğin etkileyebileceği tüm öğeleri her zaman kontrol etmesi gerekmediğinden, modern tarayıcılarda bu sorun daha az görülür. Öte yandan, eski tarayıcılar bu tür görevler için her zaman optimize edilmemiştir. Mümkün olduğunda geçersiz öğelerin sayısını azaltmalısınız.

Stil yeniden hesaplama maliyetinizi ölçme

Tarayıcıda stil yeniden hesaplamanın maliyetini ölçmenin birkaç yolu vardır. Her biri, metriği geliştirme ortamınızdaki tarayıcıda ölçmek mi istediğinize, yoksa bu sürecin web sitenizdeki gerçek kullanıcılar için ne kadar sürdüğünü mü ölçmek istediğinize bağlıdır.

Chrome Geliştirici Araçları'nda stil yeniden hesaplama maliyetini ölçme

Stil yeniden hesaplamalarının maliyetini ölçmenin bir yolu, Chrome Geliştirici Araçları'ndaki performans panelini kullanmaktır. Başlamak için aşağıdakileri 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ğıdaki resme benzer bir görüntü görürsünüz:

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

Üstteki şerit, saniyedeki kare sayısını da gösteren minyatür bir alev grafiğidir. Etkinlik şeridin alt kısmına ne kadar yakınsa tarayıcı o kadar hızlı kare çizer. Alev grafiğinin üstte düzleştiğini ve üzerinde kırmızı çubuklar olduğunu görürseniz uzun süreli karelere neden olan bir çalışmanız vardır.

Chrome DevTools'daki doldurulmuş performans panelinin etkinlik özetinde Chrome DevTools'daki sorunlu bir alanı yakınlaştırma.
Geliştirici Araçları etkinlik özetindeki uzun süreli kareler.

Kaydırma gibi bir etkileşim sırasında uzun süre çalışan karelere daha yakından bakılmalıdır. Büyük bir mor blok görürseniz etkinliği yakınlaştırın ve pahalı olabilecek stil yeniden hesaplama çalışmaları hakkında daha fazla bilgi edinmek için Stili Yeniden Hesapla etiketli çalışmaları seçin.

Stil yeniden hesaplama işleminden etkilenen öğelerin miktarı gibi önemli bilgiler de dahil olmak üzere uzun süren stil hesaplamalarının ayrıntılarını alma.
DevTools özetinde 25&nbspms'den biraz daha uzun süren uzun bir stil yeniden hesaplaması.

Etkinliği tıkladığınızda çağrı yığınını görürsünüz. Oluşturma işlemi bir kullanıcı etkileşiminden kaynaklandıysa stil değişikliğini tetikleyen JavaScript'i çağırır. Ayrıca, değişikliğin etkilediği öğe sayısını (bu durumda 900'ün biraz üzerinde öğe) ve stil hesaplamasının ne kadar sürdüğünü gösterir. Kodunuzda bir çözüm bulmaya başlamak için bu bilgileri kullanabilirsiniz.

Bir izleme yapmadan önce Performans paneli ayarlarında Seçici istatistikleri onay kutusunu işaretlediyseniz izlemedeki alt panelde aynı ada sahip ek bir sekme bulunur.

Chrome Geliştirici Araçları'nın performans panelinde görünen CSS seçici istatistikleri tablosu. Bu tabloda, geçen süre, eşleşme denemeleri, eşleşme sayısı, eşleşmeyen düğümlerin yüzdesi, seçiciler ve bulunabilecekleri stil sayfası gibi öğelerle ilgili başlıklar ve karşılık gelen veriler yer alır.
Chrome Geliştirici Araçları'nın performans panelinde gösterilen seçici istatistikleri tablosu.

Bu panel, her seçicinin göreceli maliyeti hakkında faydalı veriler sağlayarak pahalı CSS seçicileri belirlemenize olanak tanır.

Daha fazla bilgi için CSS Seçici İstatistikleri belgelerine bakın.

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

Web sitenizin gerçek kullanıcıları için stil yeniden hesaplama işleminin ne kadar sürdüğünü merak ediyorsanız Long Animation Frames API, bunu yapmak için gereken araçları size sunmaktadır. Bu API'den alınan veriler, stili yeniden hesaplama süresi de dahil olmak üzere web-vitals JavaScript kitaplığına eklenmiştir.

Bir etkileşimin sunum gecikmesinin, sayfanın INP'sine birincil katkıda bulunan faktör olduğundan şüpheleniyorsanız bu sürenin ne kadarının sayfadaki stilleri yeniden hesaplamaya harcandığını öğrenmeniz gerekir. Daha fazla bilgi için sahada stil yeniden hesaplama süresinin nasıl ölçüleceği hakkındaki makaleyi okuyun.

Kaynaklar