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:
- 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ğıdakine benzer bir resim görürsünüz:
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.
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.
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.
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
- Chrome Geliştirici Araçları'nda seçici istatistikleri
- Yanıp sönmede stil geçersiz kılma
- Sonraki Boyamayla Etkileşim (INP)
web-vitalsJavaScript kitaplığı- Sahada stil yeniden hesaplama süresini ölçme
Markus Spiske'in Unsplash tarafından hazırlanan lokomotif resim.