JavaScript genellikle görsel değişiklikleri tetikleyen bir faktördür. Bazen bu değişiklikleri stil değişiklikleriyle doğrudan, bazen de veri arama ya da sıralama gibi görsel değişikliklere yol açan hesaplamalarla yapar. Hatalı zamanlanmış veya uzun süre çalışan JavaScript, performans sorunlarının yaygın bir nedeni olabilir. Bu nedenle mümkün olduğunca bu etkiyi en aza indirmeye çalışmalısınız.
Stil hesaplaması
Öğe ekleyip kaldırarak, özellikleri, sınıfları değiştirerek veya animasyonları oynatarak DOM'un 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 sürece hesaplanmış stil hesaplaması denir.
Tarayıcı, belirli bir öğeye hangi sınıfların, sözde seçicilerin ve kimliklerin geçerli olduğunu belirlemek için eşleşen bir seçici grubu oluşturarak stilleri hesaplamaya başlar. Ardından, eşleşen seçicilerden gelen stil kurallarını işler ve öğenin hangi son stillere sahip olduğunu belirler.
Stil yeniden hesaplama süresi ve etkileşim gecikmesi
Sonraki Boyamayla Etkileşim (INP), bir sayfanın kullanıcı girişine genel olarak yanıt verme durumunu değerlendiren kullanıcı merkezli bir çalışma zamanı performansı metriğidir. Bu model, kullanıcının sayfayla etkileşimde bulunmasından tarayıcının kullanıcı arayüzüne ilgili görsel güncellemeleri gösteren bir sonraki kareyi boyamasına kadar geçen etkileşim gecikmesini ölçer.
Etkileşimin önemli bir bileşeni, bir sonraki kareyi boyamak için gereken süredir. Sonraki kareyi sunmak için yapılan oluşturma işlemi; düzen, boya ve birleştirme çalışmalarından hemen önce gerçekleşen sayfa stillerinin hesaplanması dahil birçok bölümden oluşur. Bu sayfa stil hesaplama maliyetlerine odaklanır ancak etkileşimle ilgili oluşturma aşamasının herhangi bir bölümünün azaltılması, stil hesaplamaları dahil olmak üzere toplam gecikmesini de azaltır.
Seçicilerinizin karmaşıklığını azaltın
Seçici adlarınızı basitleştirmek, sayfanızın stil hesaplamalarını hızlandırmaya yardımcı olabilir. En basit seçiciler, CSS'deki bir öğeye yalnızca bir sınıf adıyla başvurur:
.title {
/* styles */
}
Ancak projeler büyüdükçe muhtemelen daha karmaşık CSS'lere ihtiyaç duyulur ve elinizde şuna benzer seçiciler bulunabilir:
.box:nth-last-child(-n+1) .title {
/* styles */
}
Bu stillerin sayfaya nasıl uygulanacağını belirlemek için tarayıcının etkin bir şekilde "bu, üst öğesi box sınıfına sahip eksi-nth-plus-1 alt öğesi olan bir öğe mi? title sınıfına sahip bir öğe mi?" sorusunun anlaşılması, hem söz konusu tarayıcıya hem de kullanılan seçiciye bağlı olarak uzun zaman alabilir. Bunu basitleştirmek için seçiciyi
yalnızca bir sınıf adı olacak şekilde değiştirebilirsiniz:
.final-box-title {
/* styles */
}
Bu değiştirme sınıfı adları garip görünebilir, ancak tarayıcının işini çok daha basit hale getirir. Örneğin, önceki sürümde, tarayıcının bir öğenin türündeki son öğe olduğunu anlayabilmesi için öncelikle diğer tüm öğelerle ilgili her şeyi bilmesi ve ondan sonra gelen herhangi bir öğenin nth-last-child olup olmadığını belirlemesi gerekir. Bu, bir seçiciyi sırf sınıfı eşleştiği için bir öğeyle eşleştirmeye kıyasla hesaplama açısından çok daha pahalı olabilir.
Stil özellikleri ayarlanmış öğe sayısını azaltın
Performansla ilgili diğer bir konu ve genellikle seçici karmaşıklığından daha önemli olan bir diğer nokta, bir öğe değiştiğinde gerçekleşmesi gereken iş miktarıdır.
Genel anlamda, hesaplanan öğeler stilini hesaplamanın en kötü durumu, öğ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 tarayıcının her öğeyi en az bir kez kontrol etmesi gerekir.
Stil hesaplamaları, sayfanın tamamını geçersiz kılmak yerine doğrudan birkaç öğeyi hedefleyebilir. Modern tarayıcılarda bu durum genellikle daha az sorun teşkil eder. Bunun nedeni, tarayıcının her zaman bir değişikliğin etkileyebileceği tüm öğeleri kontrol etmek zorunda olmamasıdır. Diğer yandan, eski tarayıcılar bu tür görevler için her zaman optimize edilmez. Mümkün olduğunda geçersiz hale gelen öğelerin sayısını azaltmanız gerekir.
Stil yeniden hesaplama maliyetinizi ölçme
Stille ilgili yeniden hesaplama işlemlerinin 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.
- Kaydet'i tıklayın.
- Sayfayla etkileşimde bulunun.
Kaydı durdurduğunuzda aşağıdaki görüntüye benzer bir şey görürsünüz:
Üstteki şerit, aynı zamanda saniyedeki kare sayısını gösteren minyatür bir grafiktir. Etkinlik, şeridin alt kısmına ne kadar yakın olursa, tarayıcı tarafından o kadar hızlı resimler yapılır. Alev grafiğin en üstte kırmızı çubuklarla hizalandığını görürseniz uzun süre çalışan kareler vardır.
Kaydırma gibi bir etkileşim sırasında uzun süre çalışan karelere yakından bakmak yararlı olacaktır. Büyük bir mor blok görürseniz etkinliği yakınlaştırın ve Stili Yeniden Hesapla etiketli herhangi bir çalışmayı seçerek pahalı olabilecek stil yeniden hesaplama çalışması hakkında daha fazla bilgi edinin.
Etkinlik tıklandığında etkinliğin çağrı yığını gösterilir. Oluşturma işinin nedeni bir kullanıcı etkileşimiyse stil değişikliğini tetikleyen JavaScript'i çağırır. Ayrıca, değişikliğin etkilediği öğelerin sayısı (bu örnekte 900'ün biraz üzerinde) ve stil hesaplamasının ne kadar sürdüğü de gösterilir. Kodunuzda bir düzeltme bulmaya başlamak için bu bilgileri kullanabilirsiniz.
Blok, Öğe, Değiştirici'yi kullanma
BEM (Block, Element, Değiştirici) gibi kodlama yaklaşımları, performans avantajlarını eşleştiren seçiciyi içerir. BEM, her şeyin tek bir sınıfı olmasını ve hiyerarşiye ihtiyacınız olduğunda bu hiyerarşinin sınıf adına eklenmesini önerir.
.list {
/* Styles */
}
.list__list-item {
/* Styles */
}
Son alt öğe örneğindeki gibi bir değiştiriciye ihtiyacınız varsa bunu şu şekilde ekleyebilirsiniz:
.list__list-item--last-child {
/* Styles */
}
BEM, CSS'nizi düzenlemek için hem yapı açısından hem de tanıttığı stil aramasını basitleştirdiği için iyi bir başlangıç noktasıdır.
BEM'yi beğenmezseniz CSS'nize yaklaşmanın başka yolları da vardır ancak başlamadan önce bunların performansını ve ergonomisini değerlendirmeniz gerekir.
Kaynaklar
Unsplash'tan Markus Spiske'nin lokomotif resmi.