Çalışma zamanı performansı, sayfanızın yükleme yerine çalışırken nasıl performans gösterdiğini belirtir. Bu eğitim, çalışma zamanı performansını analiz etmek için Chrome Geliştirici Araçları Performans panelini nasıl kullanacağınızı öğretir. RAIL modeli söz konusu olduğunda, bu eğitimde öğrendiğiniz beceriler sayfanızın Yanıt, Animasyon ve Boşta kalma aşamalarını analiz etmek için yararlıdır.
Başlayın
Bu eğitimde, canlı bir sayfada Geliştirici Araçları'nı açacak ve sayfadaki bir performans sorununu bulmak için Performans panelini kullanacaksınız.
- Google Chrome'u Gizli Mod'da açın. Gizli Mod, Chrome'un temiz bir durumda çalışmasını sağlar. Örneğin, yüklü çok sayıda uzantınız varsa bu uzantılar performans ölçümlerinizde parazit oluşturabilir.
Gizli pencerenizde aşağıdaki sayfayı yükleyin. Bu, profilini çıkaracağınız demodur. Sayfada yukarı aşağı hareket eden küçük mavi kareler gösterilmektedir.
https://googlechrome.github.io/devtools-samples/jank/
Geliştirici Araçları'nı açmak için Command+Option+I (Mac) veya Control+ÜstKrktr+I (Windows, Linux) tuşlarına basın.
Şekil 1. Sol tarafta demo ve sağda Geliştirici Araçları bulunur
Mobil CPU simüle etme
Mobil cihazlar, masaüstü ve dizüstü bilgisayarlardan çok daha az CPU gücüne sahiptir. Bir sayfanın profilini oluşturduğunuzda, sayfanızın mobil cihazlarda nasıl performans gösterdiğini simüle etmek için CPU Sınırlama özelliğini kullanın.
- Geliştirici Araçları'nda Performans sekmesini tıklayın.
- Ekran görüntüleri onay kutusunun etkin olduğundan emin olun.
- Yakalama Ayarları'nı tıklayın. Geliştirici Araçları, performans metriklerini yakalama biçimiyle ilgili ayarları sunar.
CPU için 2x yavaşlama'yı seçin. DevTools, CPU'nuzu normalden 2 kat daha yavaş çalışacak şekilde kısıtlar.
2. Şekil. CPU kısıtlaması, mavi çerçeveli
Demoyu ayarla
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 ayarlarınız ne olursa olsun, 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.
- Mavi kareler eskisinden belirgin bir şekilde yavaş hareket edene kadar 10 ekle düğmesini tıklamaya devam edin. İleri teknoloji bir makinede bu işlem yaklaşık 20 tıklama sürebilir.
Optimize et'i tıklayın. Mavi kareler daha hızlı ve daha düzgün hareket etmelidir.
Optimizasyonu Kaldır'ı tıklayın. Mavi kareler daha yavaş hareket eder ve tekrar daha fazla olumsuzluk gösterir.
Çalışma zamanı performansını kaydetme
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ümün de her kareyi aynı sürede aynı miktarda alanı hareket ettirmesi beklenir. Optimize edilmemiş sürümde performans sorununu nasıl tespit edeceğinizi öğrenmek için Performans panelinde bir kayıt alın.
Geliştirici Araçları'nda Kaydet'i tıklayın . Geliştirici Araçları, sayfa çalışırken performans metriklerini yakalar.
Şekil 3: Sayfanın profilini oluşturma
Birkaç saniye bekleyin.
Durdur'u tıklayın. DevTools kaydı durdurur, verileri işler ve ardından sonuçları Performans panelinde görüntüler.
Şekil 4: Profilin sonuçları
Vay canına, çok fazla veri var. Endişelenmeyin, kısa süre içinde her şey daha anlamlı olacak.
Sonuçları analiz etme
Sayfanın performansını kaydettikten sonra, sayfanın performansının ne kadar kötü olduğunu ölçebilir ve nedenlerini bulabilirsiniz.
Saniyedeki kare sayısını analiz et
Animasyonların performansını ölçmek için kullanılan ana metrik saniyedeki kare sayısı (FPS) şeklindedir. Animasyonlar 60 FPS'de çalıştığında kullanıcılar mutlu olur.
FPS grafiğine bakın. FPS'nin üzerinde kırmızı bir çubuk görmeniz, kare hızının kullanıcı deneyimine zarar verecek kadar düştüğü anlamına gelir. Genel olarak, yeşil çubuk ne kadar yüksekse FPS o kadar yüksek olur.
Şekil 5: Mavi çizgili FPS grafiği
FPS grafiğinin altında CPU grafiği bulunur. CPU grafiğindeki renkler, Performans panelinin alt kısmında yer alan Özet sekmesindeki renklere karşılık gelir. CPU grafiğinin renkli olması, kayıt sırasında CPU'nun maksimum düzeyde dolu olduğu anlamına gelir. CPU'nun uzun süreler boyunca en yüksek seviyeye ulaştığını gördüğünüzde, daha az iş yapmanın yollarını bulabilirsiniz.
Şekil 6: Mavi renkte belirtilen CPU grafiği ve Özet sekmesi
Farenizle FPS, CPU veya NET grafiklerinin üzerine gelin. DevTools sayfanın ilgili andaki ekran görüntüsünü gösterir. Kaydı yeniden oynatmak için farenizi sola ve sağa hareket ettirin. Bu işlem, ileri geri oynatma olarak adlandırılır ve animasyonların ilerlemesini manuel olarak analiz etmek için yararlıdır.
Şekil 7: Sayfanın ekran görüntüsünün, kaydın 2.000 ms. civarında görüntülenmesi
Çerçeveler bölümünde, farenizi yeşil karelerden birinin üzerine getirin. Geliştirici Araçları size bu karenin FPS değerini gösterir. Her kare muhtemelen 60 FPS hedefinin çok altındadır.
8. Şekil: Çerçevenin üzerine gelme
Elbette, bu demoda sayfanın iyi performans göstermediği açıkça görülür. Ancak gerçek senaryolarda her şey o kadar açık olmayabilir. Bu nedenle, ölçüm yapmak için tüm bu araçlara sahip olmak işinize yarayacaktır.
Bonus: FPS ölçeri aç
Kullanışlı bir diğer araç da sayfa çalışırken FPS için gerçek zamanlı tahminler sağlayan FPS ölçerdir.
- Komut Menüsü'nü açmak için Command+Üst Karakter+P (Mac) veya Control+Üst Karakter+P (Windows, Linux) tuşlarına basın.
- Komut Menüsünde
Rendering
yazmaya başlayın ve Oluşturmayı Göster'i seçin. Oluşturma sekmesinde FPS Meter'ı etkinleştirin. Görüntü alanınızın sağ üst tarafında yeni bir yer paylaşımı görünür.
Şekil 9: FPS ölçer
FPS Meter'ı devre dışı bırakın ve Oluşturma sekmesini kapatmak için Escape tuşuna basın. Bu eğitimde bu adı kullanmayacaksınız.
Tıkanıklığı tespit edin
Animasyonun iyi performans göstermediğini ölçüp doğruladığınıza göre, cevaplanması gereken bir sonraki soru şudur: Neden?
Özet sekmesini not edin. Hiçbir etkinlik seçilmediğinde, bu sekmede etkinliğin bir dökümü gösterilir. Sayfa, zamanının çoğunu oluşturmak için harcamıştır. Performans, daha az iş yapma sanatı olduğundan, hedefiniz görüntü oluşturma işi için harcanan süreyi azaltmaktır.
Şekil 10: Mavi renkte özetlenen Özet sekmesi
Main (Ana) bölümünü genişletin. Geliştirici Araçları, ana iş parçacığındaki etkinliklerin zaman içindeki flame grafiğini gösterir. X ekseni, zaman içindeki kaydı gösterir. Her çubuk bir etkinliği temsil eder. Çubuk daha geniş olursa etkinliğin daha uzun sürdüğü anlamına gelir. Y ekseni, çağrı yığınını gösterir. Etkinliklerin birbirinin üzerine yığılması, alttaki etkinliklere neden olan üst etkinlikler anlamına gelir.
Şekil 11: Mavi anahatlı ana bölüm
Kayıtta çok fazla veri var. Farenizi FPS, CPU ve NET grafiklerini içeren bölüm olan Genel Bakış'ın üzerine sürükleyerek tek bir Animasyon Karesi Tetiklendi etkinliğini yakınlaştırın. Ana bölüm ve Özet sekmesi, yalnızca kaydın seçilen kısmıyla ilgili bilgileri görüntüler.
Şekil 12: Tek bir Animasyon Karesi Tetiklenen etkinliği yakınlaştırıldı
Animasyon Karesi Tetiklendi etkinliğinin sağ üst tarafındaki kırmızı üçgene dikkat edin. Kırmızı bir üçgen görüyorsanız bu, söz konusu etkinlikle ilgili bir sorun olabileceğine dair bir uyarıdır.
Animasyon Çerçevesi Tetiklendi etkinliğini tıklayın. Özet sekmesi artık bu etkinlikle ilgili bilgileri size gösterir. Göster bağlantısına dikkat edin. Bu seçeneği tıklamak, Geliştirici Araçları'nın Animasyon Karesi Tetiklendi etkinliğini başlatan etkinliği vurgulamasına neden olur. app.js:94 bağlantısına da dikkat edin. Bu seçeneği tıkladığınızda kaynak kodundaki ilgili satıra yönlendirilirsiniz.
Şekil 13: Animasyon Karesi Tetiklendi etkinliği hakkında daha fazla bilgi
app.update etkinliğinin altında bir dizi mor etkinlik görünür. Daha geniş olsaydılar, sanki her üzerinde kırmızı bir üçgen olabilirdi. Şimdi mor Layout etkinliklerinden birini tıklayın. Geliştirici Araçları, Özet sekmesinde etkinlikle ilgili daha fazla bilgi sağlar. Aslında, zorunlu yeniden akışla (düzeni ifade eden başka bir kelime) ilgili bir uyarı vardır.
Özet sekmesinde, Zorunlu Düzen altındaki app.js:70 bağlantısını tıklayın. Geliştirici Araçları sizi, düzeni zorlayan kod satırına götürür.
Şekil 13: Zorunlu düzene neden olan kod satırı
Bora Yapması gereken uzun bir işti ancak artık çalışma zamanı performansını analiz etmek için temel iş akışı konusunda sağlam bir temele sahipsiniz. Tebrikler.
Bonus: Optimize edilmiş sürümü analiz edin
Öğrendiğiniz iş akışlarını ve araçları kullanarak optimize edilmiş kodu etkinleştirmek için demodaki Optimize et'i tıklayın, başka bir performans kaydı alın ve ardından sonuçları analiz edin. Uygulamanın optimize edilmiş sürümünün çok daha az iş yaparak daha iyi performans sağladığını görebilirsiniz. İyileştirilmiş kare hızından Ana bölümün flame grafiğindeki etkinliklerdeki azalmaya kadar.
Sonraki adımlar
Performansı anlamanın temeli RAIL modelidir. Bu model size kullanıcılarınız için en önemli performans metriklerini öğretir. Daha fazla bilgi için RAIL Modeliyle Performansı Ölçme bölümüne bakın.
Performans panelini rahatça kullanabilmek için alıştırma yapmak mükemmel bir fikirdir. Kendi sayfalarınızın profilini oluşturmayı ve
sonuçları analiz etmeyi deneyin. Sonuçlarınızla ilgili sorunuz varsa google-chrome-devtools
ile etiketlenmiş bir Stack Overflow sorusu açın. Mümkünse ekran görüntülerini veya yeniden oluşturulabilir
sayfaların bağlantılarını ekleyin.
Çalışma zamanı performansı konusunda uzman olmak için tarayıcının HTML, CSS ve JS'yi ekranda nasıl piksellere çevirdiğini öğrenmeniz gerekir. Başlamak için en iyi yer Oluşturma Performansına Genel Bakış sayfasıdır. The Anatomy Of A Frame (Karenin Anatomisi) daha da ayrıntılı şekilde çalışıyor.
Son olarak, çalışma zamanı performansını iyileştirmenin birçok yolu vardır. Bu eğitim, Performans panelinde size odaklı bir tur sunmak için animasyon performans sorunlarından birine odaklanmıştır ancak bu, karşılaşabileceğiniz birçok performans sorunundan yalnızca biridir. Oluşturma Performansı serisinin geri kalanında, çalışma zamanı performansının çeşitli yönlerini iyileştirmek için pek çok faydalı ipucu bulunmaktadır. Örneğin:
- JS Yürütmeyi Optimize Etme
- Stil Hesaplamalarının Kapsamını ve Karmaşıklığını Azaltma
- Büyük, Karmaşık Düzenler ve Düzenleri Karmaşıklaştırmaktan Kaçınma
- Boya Karmaşıklığını Basitleştirin ve Boya Alanlarını Azaltın
- Yalnızca Bileşik Mülklere Bağlı Tutun ve Katman Sayısını Yönetin
- Giriş İşleyicilerinizi Ardışık Şekilde Geriye Kaydırma