Çalışma zamanı performansını analiz edin

Kayce Basques

Çalışma zamanı performansı, sayfanızın yükleme yerine çalışırken nasıl performans gösterdiğini belirtir. Bu eğitimde, çalışma zamanı performansını analiz etmek için Chrome Geliştirici Araçları Performans panelini nasıl kullanacağınız açıklanmaktadır. RAIL modeli açısından bu eğitimde öğrendiğiniz beceriler, sayfanızı yanıt, animasyon ve boş kalma aşamalarını analiz etmek için yararlıdır.

Başlayın

Bu eğitimde, yayındaki bir sayfada performans darboğazını bulmak için Performans panelini kullanacağız. Başlamak için:

  1. Google Chrome'u Gizli Mod'da açın. Gizli mod, Chrome'un temiz bir durumda çalışmasını sağlar. Örneğin, çok sayıda uzantınız varsa bu uzantılar performans ölçümlerinizde gürültü oluşturabilir.

  2. Gizli pencerenize aşağıdaki sayfayı yükleyin. Bu, profilini oluşturacağınız demodur. Sayfada yukarı ve aşağı hareket eden bir grup küçük mavi kare gösterilir.

    https://googlechrome.github.io/devtools-samples/jank/

  3. Geliştirici Araçları'nı açmak için Command+Option+I (Mac) veya Control+Üst Karakter+I (Windows, Linux) tuşlarına basın.

    Sol tarafta demo, sağ tarafta ise Geliştirici Araçları gösterilmektedir.

Mobil CPU'yu simüle etme

Mobil cihazların CPU gücü, masaüstü ve dizüstü bilgisayarlardan çok daha azdır. Bir sayfanın profilini her oluşturduğunuzda, sayfanızı mobil cihazlarda nasıl performans gösterdiğini simüle etmek için CPU kısıtlamasını kullanın.

  1. Geliştirici Araçları'nda Performans sekmesini tıklayın.
  2. Ekran görüntüleri onay kutusunun etkinleştirildiğinden emin olun.
  3. Kayıt Ayarları 'nı tıklayın. DevTools, performans metriklerini yakalama şekliyle ilgili ayarları gösterir.

  4. CPU için 4 kat yavaşlatma'yı seçin. DevTools, CPU'nuzu normalden 4 kat daha yavaş olacak şekilde sınırlandırır.

    CPU sınırlaması 4 kat yavaşlatma olarak ayarlandı.

Demoyu ayarlama

Bu web sitesinin tüm okuyucuları için tutarlı bir şekilde çalışan bir çalışma zamanı performans demosu oluşturmak zordur. Bu bölüm, özel kurulumunuzdan bağımsız olarak deneyiminizin bu eğitimde gördüğünüz ekran görüntüleri ve açıklamalarla nispeten tutarlı olmasını sağlamak için demoyu özelleştirmenize olanak tanır.

  1. Mavi kareler öncesine göre belirgin ölçüde yavaşlayana kadar 10 ekle'yi tıklamaya devam edin. Üst düzey bir makinede bu işlem yaklaşık 20 tıklama sürebilir.

  2. Optimize'ı tıklayın. Mavi kareler daha hızlı ve daha akıcı olmalıdır.

  3. Optimizasyonu kaldır'ı tıklayın. Mavi kareler tekrar daha yavaş ve daha sarsıntılı hareket ediyor.

Çalışma zamanı performansını kaydedin

Sayfanın optimize edilmiş sürümünü çalıştırdığınızda mavi kareler daha hızlı hareket eder. Bunun nedeni nedir? Her iki sürümde de her karenin aynı süre içinde aynı miktarda hareket etmesi gerekir. Optimize edilmemiş sürümdeki performans darboğazını nasıl tespit edeceğinizi öğrenmek için Performans panelinde kayıt alın.

  1. DevTools'ta Kaydet'i tıklayın . Geliştirici Araçları, sayfa çalışırken performans metriklerini yakalar.

    Demo sayfasının profilini oluşturma.

  2. Birkaç saniye bekleyin.

  3. Durdur'u tıklayın. DevTools kaydı durdurur, verileri işler ve sonuçları Performans panelinde gösterir.

    Profil oluşturma raporu sayfası.

Vay be, çok fazla veri var. Endişelenmeyin, kısa süre içinde daha net bir şekilde anlayacaksınız.

Sonuçları analiz etme

Performans kaydı oluşturduktan sonra sayfanın performansının ne kadar düşük olduğunu analiz edebilir ve nedenlerini bulabilirsiniz.

Saniyedeki kare sayısını analiz etme

Herhangi bir animasyonun performansını ölçmek için kullanılan ana metrik, saniyedeki kare sayısıdır (FPS). Kullanıcılar, animasyonlar 60 FPS'de çalıştırıldığında memnun olur.

  1. FPS grafiğine bakın. FPS'nin üzerinde kırmızı bir çubuk gördüğünüzde kare hızı o kadar düşmüştür ki muhtemelen kullanıcı deneyimine zarar vermektedir.

    FPS grafiği vurgulanmıştır.

  2. FPS grafiğinin altında CPU grafiğini görürsünüz. CPU grafiğindeki renkler, Performans panelinin alt kısmındaki Özet sekmesindeki renklere karşılık gelir. CPU grafiğinin renkli olması, CPU'nun kayıt sırasında maksimize edildiği anlamına gelir. CPU'nun uzun süre en yüksek seviyeye ulaştığını görmek, daha az iş yapmanın yollarını bulmanız için bir işarettir.

    CPU grafiği ve Özet sekmesi.

  3. Farenizle FPS, CPU veya NET grafiklerinin üzerine gelin. Geliştirici Araçları, o andaki sayfanın ekran görüntüsünü gösterir. Kaydı yeniden oynatmak için farenizi sola ve sağa hareket ettirin. Bu işleme ileri geri oynatma denir ve animasyonların ilerleme durumunu manuel olarak analiz etmek için yararlıdır.

    Performans kaydındaki bir ekran görüntüsünün görüntülenmesi.

  4. Çerçeveler bölümünde, fare imlecinizi yeşil karelerden birinin üzerine getirin. Geliştirici Araçları, size söz konusu karenin FPS'sini gösterir. Her kare muhtemelen 60 FPS hedefinin çok altındadır.

    Fareyle bir çerçevenin üzerine gelin.

Elbette bu demoda sayfanın iyi performans göstermediği oldukça açık. Ancak gerçek senaryolarda, durum çok net olmayabilir. Bu nedenle, ölçüm yapmak için bu araçların tümüne sahip olmak yararlıdır.

Bonus: FPS ölçerini açma

Sayfa çalışırken FPS için gerçek zamanlı tahminler sunan FPS ölçer de kullanışlı bir araçtır.

  1. Komut menüsünü açmak için Command+Shift+P (Mac) veya Control+Shift+P (Windows, Linux) tuşlarına basın.
  2. Komut menüsünde Rendering yazmaya başlayın ve Oluşturma işlemini göster'i seçin.

  3. Oluşturma panelinde Oluşturma istatistiklerini göster'i etkinleştirin. Görüntü alanınızın sağ üst köşesinde yeni bir yer paylaşımı görünür.

    FPS ölçer.

  4. FPS Ölçer'i devre dışı bırakın ve Oluşturma panelini kapatmak için Escape tuşuna basın. Bu eğitimde bu özelliği kullanmıyoruz.

Performans sorununun kaynağını bulma

Animasyonun iyi performans göstermediğini ölçtüğünüze ve doğruladığınıza göre yanıtlamanız gereken bir sonraki soru şudur: Neden?

  1. Özet sekmesine dikkat edin. Hiçbir etkinlik seçilmediğinde bu sekmede etkinliğin dökümü gösterilir. Sayfa, zamanının çoğunu oluşturmaya harcadı. Performans, daha az iş yapma sanatı olduğundan hedefiniz, oluşturma işlemi için harcanan süreyi azaltmaktır.

    Mavi dış çizgili Özet sekmesi.

  2. Ana bölümünü genişletin. Geliştirici Araçları, ana iş parçacığındaki etkinliklerin zaman içindeki değişim grafiğini gösterir. X ekseni, zaman içindeki kaydı temsil eder. Her çubuk bir etkinliği temsil eder. Daha geniş bir çubuk, etkinliğin daha uzun sürdüğünü gösterir. Y ekseni, çağrı yığınını temsil eder. Etkinliklerin üst üste yığılmış olması, üstteki etkinliklerin alt etkinliklerin neden olduğu anlamına gelir.

    Ana bölüm.

  3. Kayıtta çok fazla veri var. Farenizi tıklayıp basılı tutarak FPS, CPU ve NET grafiklerini içeren Genel Bakış bölümüne sürükleyerek tek bir Animasyon Karesinin Atılması etkinliğini yakınlaştırın. Ana bölümü ve Özet sekmesi yalnızca kaydın seçili bölümüne ait bilgileri gösterir.

    Tek bir Animasyon Karesi Tetiklendi etkinliğine yakınlaştırılmış görünüm.

  4. Görev ve düzen etkinliklerinin sağ üst kısmındaki kırmızı üçgeni not edin. Kırmızı üçgen gördüğünüzde bu etkinlikle ilgili bir sorun olabileceğine dair uyarı alırsınız. Görev'de kırmızı üçgen olması, uzun bir görev olduğu anlamına gelir.

  5. Animation Frame Fired etkinliğini tıklayın. Özet sekmesi artık bu etkinlikle ilgili bilgileri gösterir. Başlatıcı'nın yanındaki bağlantıyı tıkladığınızda DevTools, Animation Frame Fired etkinliğini başlatan etkinliği vurgular. app.update @ bağlantısını da unutmayın. Bu düğmeyi tıkladığınızda kaynak koddaki ilgili satıra yönlendirilirsiniz.

    Animation Frame Fired etkinliği hakkında daha fazla bilgi.

  6. app.update etkinliğinin altında bir grup mor etkinlik var. Daha geniş olsaydı her birinin üzerinde kırmızı bir üçgen olabilirdi. Şimdi mor Düzen etkinliklerinden birini tıklayın. Geliştirici Araçları, Özet sekmesinde etkinlikle ilgili daha fazla bilgi sağlar. Aslında, zorunlu yeniden akışlarla (düzen için başka bir kelime) ilgili bir uyarı vardır.

  7. Özet sekmesinde, İlk Düzen Geçersiz Kılma bölümünde app.update @ bağlantısının yanındaki bağlantıyı tıklayın. Geliştirici Araçları sizi düzeni zorlayan kod satırına yönlendirir.

    Zorunlu düzene neden olan kod satırı.

Bora Çok fazla halledeceksiniz ama artık çalışma zamanı performansını analiz etmek için temel iş akışında sağlam bir temeliniz var. İyi iş çıkardınız.

Bonus: Optimize edilmiş sürümü analiz etme

Az önce öğrendiğiniz iş akışlarını ve araçları kullanarak, optimize edilmiş kodu etkinleştirmek, başka bir performans kaydı almak ve ardından sonuçları analiz etmek için demoda Optimize'i tıklayın. Ana bölümündeki alev grafiğinde, uygulamanın optimize edilmiş sürümünün çok daha az iş yaptığını ve bunun sonucunda daha iyi performans elde edildiğini görebilirsiniz.

Sonraki adımlar

Performansı anlamanın temeli RAIL modelidir. Bu model, kullanıcılarınız için en önemli performans metriklerini size öğretir. Daha fazla bilgi edinmek için RAIL Modeliyle Performansı Ölçme bölümüne bakın.

Performans panelini daha rahat kullanılır hale getirmek için pratik yaparak mükemmel hale getirebilirsiniz. Kendi sayfalarınızın profilini oluşturmayı ve sonuçları analiz etmeyi deneyin. Sonuçlarınızla ilgili sorularınız varsa google-chrome-devtools etiketiyle bir Stack Overflow sorusu açın. Mümkünse yeniden oluşturulabilen sayfaların ekran görüntülerini veya bağlantılarını ekleyin.

Çalışma zamanı performansında uzman olmak için tarayıcının HTML, CSS ve JS'yi ekranda piksellere nasıl çevirdiğini öğrenmeniz gerekir. Başlamak için en iyi yer Oluşturma Performansı Genel Bakış sayfasıdır. The Anatomy Of A Frame (Kadroların Anatomisi) adlı makalede bu konuyla ilgili daha fazla bilgi bulabilirsiniz.

Son olarak, çalışma zamanı performansını artırmanın birçok yolu vardır. Bu eğitim, Performans panelinde odaklanmış bir tur sunmak için belirli bir animasyon darboğazına odaklandı ancak bu, karşılaşabileceğiniz birçok darboğazdan yalnızca biridir. Oluşturma Performansı serisinin geri kalanında, çalışma zamanı performansının çeşitli yönlerini iyileştirmeye yönelik birçok faydalı ipucu yer alır. Örneğin: