Performans paneli, ana iş parçacığında çalışması uzun süren ve performansı yavaş olan çalışmaları belirtmek için uzun süreli her görevi sağ üst köşede kırmızı bir üçgenle ve Özet sekmesinde bir uyarıyla işaretler:
Performans kayıtlarınızda bu uzun süreli görevlerden bazıları Stili Yeniden Hesapla etkinlikleri olabilir. Stili Yeniden Hesapla etkinliği, tarayıcının aşağıdakileri yapması için gereken süreyi izler:
- Belirli bir öğeyle eşleşen tüm CSS stil kurallarını bulmak için sayfadaki DOM öğelerini yineleyin.
- Her öğenin gerçek stilini, eşleşen CSS stil kurallarına göre hesaplayın.
CSS kurallarının geçerliliği değiştiğinde aşağıdaki durumlarda CSS stillerinin yeniden hesaplanması gerekir:
- DOM'ye öğe eklenir veya DOM'dan öğe kaldırılır.
- Bir öğenin özellikleri (ör. bir sınıfın veya kimlik özelliğinin değeri) değiştirilir.
- Kullanıcı, fare hareketi veya öğenin odağını değiştirme gibi
:hoverkurallarını etkileyebilir.
Uzun süreli Stili Yeniden Hesapla etkinlikleri bulursanız CSS seçicilerinizden hangisinin en çok zaman aldığını ve performansı yavaşlattığını anlamak için Seçici İstatistikleri sekmesini kullanabilirsiniz.
Seçici İstatistikleri sekmesi, bir performans kaydında bir veya daha fazla Stili Yeniden Hesapla etkinliğine dahil olan CSS kural seçicileriyle ilgili istatistikler sağlar.
Seçici İstatistikleri açıkken performans takibi kaydetme
Uzun süreli Stili yeniden hesapla etkinlikleri sırasında CSS kuralı seçicilerinizin istatistiklerini görüntülemek için Seçici İstatistikleri yakalama ayarı açıkken bir performans izlemesi kaydedin.
Seçici istatistikleriyle bir performans izlemeyi kaydetmek için:
Bir web sayfasını (örneğin, Fotoğraf Galerisi demo sayfası) açın.
DevTools'u açın ve Performans paneline gidin.
Performans panelinde ayarlar Yakalama ayarları düğmesini tıklayın ve onay kutusu CSS seçici istatistiklerini etkinleştir'i işaretleyin.
radio_button_checked Kaydet'i tıklayın, iyileştirmek istediğiniz senaryoyu çalıştırın ve radio_button_checked Durdur'u tıklayın.
Ardından, sonraki bölümlerde açıklanan şekilde CSS seçici istatistiklerini görüntüleyin.
Tek bir etkinlik için CSS kural seçici istatistiklerini görüntüleme
Tek bir Stili Yeniden Hesapla etkinliğine dahil olan CSS kural seçicilerinin istatistiklerini görüntülemek için:
Performans kaydınızda Stili yeniden hesapla etkinliğini bulun ve tıklayın.
Performans panelinin alt bölümünde Seçici İstatistikleri sekmesini açın.
Seçici İstatistikleri sekmesindeki CSS seçiciler tablosu
Seçici İstatistikleri sekmesi, bir CSS seçici tablosu içerir. Tabloda her CSS seçici için aşağıdaki bilgiler gösterilir:
| Sütun | Açıklama |
|---|---|
| Geçen süre (ms) | Tarayıcının bu CSS seçiciyle eşleşme süresi. Bu süre, milisaniye (ms) cinsinden belirtilir. 1 ms, saniyenin 1/1000'idir. |
| Maç Girişimleri | Tarayıcı motorunun bu CSS seçici ile eşleştirmeyi denediği öğelerin sayısı. |
| Eşleşme Sayısı | Tarayıcı motorunun bu CSS seçiciyle eşleştirdiği öğe sayısı. |
| Yavaş yol eşleşmeme yüzdesi | Bu CSS seçiciyle eşleşmeyen öğelerin, tarayıcı motorunun eşleştirmeye çalıştığı ve eşleşme için daha az optimize edilmiş kod kullanması gereken öğelere oranı. |
| Seçici | Eşleşen CSS seçici. |
| Stil Sayfası | CSS seçiciyi içeren CSS stil sayfası. |
İşlemi tamamladığınızda, Performans panelinde ayarlar Yakalama ayarları'nı açın ve onay kutusu CSS seçici istatistiklerini etkinleştir'in işaretini kaldırın.
Birden fazla etkinlik için CSS kuralı seçici istatistiklerini görüntüleme
Birden fazla Stili Yeniden Hesapla etkinliğine dahil olan CSS kural seçicilerinin toplu istatistiklerini görüntülemek için aşağıdaki gibi birden fazla Seçici İstatistikleri tablosunu bir e-tabloya kopyalayın:
İlgilendiğiniz ilk Stili Yeniden Hesapla etkinliğini bulun ve tıklayın.
Performans panelinin alt bölümünde Seçici İstatistikleri sekmesini açın.
Seçici istatistik tablosunu sağ tıklayın ve Tabloyu kopyala'yı seçin.
Tabloyu Google E-Tablolar gibi bir e-tabloya yapıştırın.
Önceki adımları, ilgilendiğiniz diğer Stili Yeniden Hesapla etkinlikleriyle tekrarlayın.
İşlemi tamamladığınızda, Performans panelinde ayarlar Yakalama ayarları'nı açın ve onay kutusu CSS seçici istatistiklerini etkinleştir'in işaretini kaldırın.
Tam kayıt için birleştirilmiş CSS kuralı seçici istatistiklerini görüntüleme
Performans kaydının tamamında yer alan CSS kuralı seçicilerin toplu istatistiklerini görüntülemek için:
Seçilebilecek etkinliklerin seçimini kaldırmak için alev grafiğindeki boş bir alanı tıklayın.
Tüm kayıt aralığını seçin. Bunu yapmak için Performans panelinin üst kısmındaki CPU grafiğini çift tıklayın.
Performans panelinin alt bölümünde Seçici İstatistikleri sekmesini açın. En üstte, tüm seçicilere ait toplamlarla ilgili verilerin bulunduğu yeni bir satır görürsünüz.
İşlemi tamamladığınızda, Performans panelinde ayarlar Yakalama ayarları'nı açın ve onay kutusu CSS seçici istatistiklerini etkinleştir'in işaretini kaldırın.
CSS seçici istatistiklerini analiz etme
Seçici İstatistikleri tablosundaki verileri artan veya azalan düzende sıralamak için bir sütun başlığını tıklayın. Örneğin, hangi CSS seçicilerin en fazla zaman aldığını görmek için Geçen süre (ms) sütun başlığını tıklayın.
Web sayfanızın performansını artırmaya çalışmak için aşağıdakileri yapan CSS seçicilere odaklanın:
- Hesaplanması uzun sürdü (yüksek Geçen (ms) değeri).
- Tarayıcının birçok kez eşleştirmeye çalıştığı siteler (yüksek Eşleşme Denemeleri değeri).
- Tarayıcının gerçekte birçok öğeyi eşleştirmediği öğeler (Eşleşme Denemeleri değerine kıyasla düşük Eşleşme Sayısı değeri).
- Bunların yavaş yol eşleşmeme yüzdesi yüksektir.
Örneğin, önceki ekran görüntüsünde:
- En çok zaman ilk CSS seçici (
html body .ps[tooltip...) gerekti. - Tarayıcı motoru, bu CSS seçiciyi 1.104 kez eşleştirmeyi denedi ancak hiçbir öğeyle eşleşmedi.
Bu nedenle bu CSS seçici, iyileştirmeye çalışılacak ilk adaydır.
CSS seçicilerinizi, hesaplamaları ve sayfadaki daha az öğeyi eşleştirmeleri için daha az zaman gerektirecek şekilde değiştirmeyi deneyin. CSS seçicilerinizi nasıl iyileştirebileceğiniz, kendi kullanım alanınıza bağlıdır.
Yaptığınız değişikliklerin Stili Yeniden Hesapla etkinlik süresinin azalmasına yardımcı olduğunu onaylamak için Geçen süre (ms) sütununda bu adımları tekrarlayın.