JavaScript genellikle görsel değişiklikleri tetikler. Bazen bu değişiklikleri doğrudan stil manipülasyonlarıyla, bazen de verileri arama veya sıralama gibi görsel değişikliklere yol açan hesaplamalarla yapar. Kötü zamanlanmış veya uzun süren JavaScript, performans sorunlarının yaygın bir nedeni olabilir. Bu nedenle, mümkün olduğunda etkisini en aza indirmeniz gerekir.
Stil hesaplama
Öğe ekleyip kaldırarak, özellikleri, sınıfları değiştirerek veya animasyon oynatarak DOM'u değiştirmek 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 adı verilir.
Tarayıcı, belirli bir öğeye hangi sınıfların, sözde seçicilerin ve kimliklerin uygulanacağını belirlemek için eşleşen seçiciler kümesi oluşturarak stilleri hesaplamaya başlar. Ardından, eşleşen seçicilerden gelen stil kurallarını işler ve öğenin son stillerinin ne olduğunu belirler.
Stil yeniden hesaplamanın etkileşim gecikmesindeki rolü
Interaction to Next Paint (INP), bir sayfanın kullanıcı girişine genel yanıt verme durumunu değerlendiren, kullanıcı odaklı bir çalışma zamanı performans metriğidir. Kullanıcının sayfayla etkileşim kurmasından tarayıcının kullanıcı arayüzünde ilgili görsel güncellemeleri gösteren bir sonraki kareyi boyamasına kadar geçen etkileşim gecikmesini ölçer.
Bir etkileşimin önemli bir bileşeni, sonraki karenin boyanması için geçen süredir. Bir sonraki kareyi göstermek için yapılan oluşturma çalışması, düzenlemeden hemen önce gerçekleşen sayfa stillerinin hesaplanması, boyama ve birleştirme çalışması dahil olmak üzere birçok bölümden oluşur. Bu kılavuz, stil hesaplama maliyetlerine odaklanmaktadır ancak etkileşimin toplam oluşturma süresinin herhangi bir bölümünü azaltmak, toplam gecikme süresini de azaltır.
Seçicilerinizin karmaşıklığını azaltın
CSS seçicilerini basitleş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ıyla referans verir:
.title {
/* styles */
}
Ancak herhangi bir proje büyüdükçe daha karmaşık CSS'ye ihtiyaç duyar ve sonuç olarak şu şekilde seçicilerle karşılaşabilirsiniz:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Tarayıcının bu stillerin sayfaya nasıl uygulanacağını belirlemek için etkili bir şekilde "Bu, üst öğesi box sınıfına ait olan ve üst öğesinin eksi-n'inci artı 1 alt öğesi olan title sınıfına ait bir öğe mi?" diye sorması gerekir. Tarayıcının bunu anlaması 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 yedek sınıf adları garip görünebilir ancak tarayıcının işini çok daha kolay hale getirir. Örneğin, önceki sürümde tarayıcının bir öğenin türünün sonuncusu olduğunu bilmesi için önce kendisinden sonra gelen ve nth-last-child olabilecek öğeler olup olmadığını belirlemek üzere diğer tüm öğeler hakkında her şeyi bilmesi gerekir. Bu, bir seçiciyi yalnızca sınıf adına göre bir öğeyle eşleştirmekten çok daha fazla hesaplama gücü gerektirebilir.
Stil verilen öğe sayısını azaltın.
Performansla ilgili bir diğer önemli nokta (ve genellikle seçici karmaşıklığından daha önemlidir) bir öğe değiştiğinde yapılması gereken iş miktarıdır.
Genel olarak, hesaplanmış öğe stilini hesaplamanın en kötü durumdaki maliyeti, öğe sayısının seçici sayısıyla çarpımıdır. Bunun nedeni, tarayıcının eşleşip eşleşmediğini görmek için her öğeyi her stile karşı en az bir kez kontrol etmesi gerekmesidir.
Stil hesaplamaları, tüm sayfayı geçersiz kılmak yerine doğrudan birkaç öğeyi hedefleyebilir. Tarayıcının, değişikliğin etkileyebileceği tüm öğeleri her zaman kontrol etmesi gerekmediğinden bu durum modern tarayıcılarda daha az sorun yaratır. Öte yandan, eski tarayıcılar bu tür görevler için her zaman optimize edilmez. Mümkün olduğunda geçersiz kılınan öğelerin sayısını azaltmalısınız.
Stil yeniden hesaplama maliyetinizi ölçme
Tarayıcıda stil yeniden hesaplamasının maliyetini ölçmenin birkaç yolu vardır. Bunların her biri, geliştirme ortamınızda tarayıcıda ölçmek isteyip istemediğinize veya bu işlemin web sitenizdeki gerçek kullanıcılar için ne kadar sürdüğünü ölçmek isteyip istemediğ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 en altına ne kadar yakınsa tarayıcı tarafından kareler o kadar hızlı çizilir. Alev grafiğinin üst kısmında kırmızı çubuklarla düzleştiğini görürseniz uzun süren karelere neden olan bir çalışma yapıyorsunuz demektir.
Kaydırma gibi bir etkileşim sırasında uzun süren kareler daha yakından incelenmelidir. Büyük bir mor blok görürseniz etkinliği yakınlaştırın ve olası maliyetli stil yeniden hesaplama çalışması hakkında daha fazla bilgi edinmek için Stili Yeniden Hesapla olarak etiketlenmiş herhangi bir çalışmayı seçin.
Etkinliği tıkladığınızda çağrı yığını gösterilir. Oluşturma işlemi bir kullanıcı etkileşiminden kaynaklanıyorsa stil değişikliğini tetikleyen JavaScript'i belirtir. Ayrıca, değişikliğin etkilediği öğe sayısını (bu örnekte 900'den biraz fazla) ve stil hesaplamasının ne kadar sürdüğünü de gösterir. Bu bilgileri kullanarak kodunuzda düzeltme yapmaya başlayabilirsiniz.
İzleme 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öreli maliyeti hakkında faydalı veriler sağlar. Böylece, maliyetli CSS seçicileri belirleyebilirsiniz.
Daha fazla bilgi için CSS Selector Stats dokümanlarına 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 hesaplamasının ne kadar sürdüğünü merak ediyorsanız Long Animation Frames API bu konuda size yardımcı olacak araçları sunar. Bu API'den alınan veriler, stil yeniden hesaplama süresi de dahil olmak üzere web-vitals JavaScript kitaplığına eklendi.
Bir etkileşimin sunumundaki gecikmenin, sayfanın INP'sine en çok katkıda bulunan faktör olduğunu düşünüyorsanız bu sürenin ne kadarının sayfadaki stilleri yeniden hesaplamakla harcandığını bulmanız gerekir. Daha fazla bilgi için stil yeniden hesaplama süresini sahada ölçme hakkında bilgi edinin.