Performans izleme paneli

Dale St. Marthe

Sitenizin yük ve çalışma zamanı performansı hakkında hızlı bir şekilde fikir edinmek için Performans izleyicisini kullanın.

Genel bakış

Performans izleyici paneli, performans metriklerini gerçek zamanlı olarak grafiksel olarak gösteren bir zaman çizelgesi görüntüler. Göstermek veya gizlemek için bir metriği tıklayın. Ardından, uygulamanızla etkileşimde bulunurken grafiğin nasıl değiştiğini görün.

Performans izleyici aşağıdaki metrikleri izler:

• CPU kullanımı.
• JavaScript yığın boyutu.
• Sayfadaki DOM düğümlerinin, JavaScript etkinlik işleyicilerinin, dokümanların ve çerçevelerin toplam sayısı.
• Saniye başına düzenler ve stil yeniden hesaplamaları.

Performans izleme panelini açma

Performans izleyici panelini açmak için:

1. Geliştirici Araçları'nı açın.
2. Aşağıdaki tuşlara basarak Komut menüsünü açın:
   • macOS: Command+Üst Karakter+P
   • Windows, Linux, ChromeOS: Control+Üst Karakter+P
3. Performance monitor yazmaya başlayın, Performans izleyicisini göster'i seçin ve Enter tuşuna basın. DevTools, Geliştirici Araçları pencerenizin alt kısmında Performans izleyici panelini görüntüler.

Alternatif olarak, sağ üst köşede more_vert Diğer seçenekler > Diğer araçlar > Performans izleyici'yi seçin.

Performans izleme panelini kullanma

Performans izleyici, web sitenizin çalışma zamanı performansı hakkında genel bir fikir verir.

Web sitenizle etkileşim kurduğunuz sırada metrik değerlerinin nasıl değiştiğini gözlemlemek, iyileştirme fırsatları sağlayabilir.

Performans izleyicisinin yararlı bir özelliği, sayfa gezinmesi boyunca aynı kalmasıdır. Bu nedenle, ön uç geliştiricisi olarak Performans izleyicisini açıp web sitesinde gezinerek ve DOM Düğümleri ile Düzen/sn metriklerine göz atarak düzenin kilitlenmesi gibi sorunlardan kaçınabilirsiniz.

Kullanıcılar sitenizde yavaş yükleme süreleri bildiriyorsa Performans izleyici sorunlu alanları belirlemenize yardımcı olabilir.

Örneğin, CPU kullanımındaki büyük bir sıçrama, verimsiz kod olduğu anlamına gelebilir. Genel olarak, bir sayfada çok sayıda JS etkinlik işleyicisi varsa, bellekte yer açmak için kodunuzu yeniden düzenleyerek bu sayıları azaltmanız yararlı olabilir.

Performans analizine yeni başlıyorsanız, önerilen yol ilk olarak Lighthouse panelini kullanmanız ve ardından Performans panelini veya Performans izleyicisi'ni kullanarak daha ayrıntılı araştırma yapmaktır.