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:
- Geliştirici Araçları'nı açın.
- Performans sekmesine gidin.
- Seçici istatistikleri onay kutusunu işaretleyin (isteğe bağlı).
- Kaydet'i tıklayın.
- Sayfayla etkileşimde bulunun.
Kaydı durdurduğunuzda aşağıdaki resme benzer bir görüntü görürsünüz:
Ü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.
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.
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.
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.