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

Kayce Baskçalar

Twitter GitHub Glitch

Not: Sayfalarınızın nasıl daha hızlı yüklenmesini sağlayacağını öğrenmek için Web Sitesi Hızını Optimize Etme konusuna bakın.

Ç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.

Dikkat: Bu eğitim, Chrome 59 sürümünü temel alır. Başka bir Chrome sürümü kullanıyorsanız Geliştirici Araçları'nın kullanıcı arayüzü ve özellikleri farklı olabilir. Hangi Chrome sürümünü kullandığınızı öğrenmek için chrome://help sitesine göz atın.

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.

1. 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.

2. 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/

3. 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

   Not: Geri kalan ekran görüntülerinde, içeriğini daha iyi görebilmeniz için DevTools ayrı bir pencerede gösterilmiştir.

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.

1. Geliştirici Araçları'nda Performans sekmesini tıklayın.
2. Ekran görüntüleri onay kutusunun etkin olduğundan emin olun.
3. Yakalama Ayarları'nı tıklayın. Geliştirici Araçları, performans metriklerini yakalama biçimiyle ilgili ayarları sunar.

4. 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

   Not: Diğer sayfaları test ederken, bu sayfaların düşük teknoloji mobil cihazlarda düzgün çalıştığından emin olmak istiyorsanız CPU Kısıtlaması'nı 20 kat yavaşlama olarak ayarlayın. Bu demo, 20 kat yavaşlamada iyi çalışmaz, bu nedenle yalnızca eğitim amacıyla 2 kat yavaşlatma kullanır.

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.

1. 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.

2. Optimize et'i tıklayın. Mavi kareler daha hızlı ve daha düzgün hareket etmelidir.

   Not: Optimize edilmiş ve optimize edilmemiş sürümler arasında belirgin bir fark görmüyorsanız 10'u Çıkar'ı birkaç kez tıklayıp tekrar deneyin. Çok fazla mavi kare eklerseniz CPU'yu en üst düzeye çıkarmış olursunuz ve iki sürümün sonuçları arasında büyük bir fark görmezsiniz.

3. 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.

1. 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

2. Birkaç saniye bekleyin.

3. 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.

1. 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

2. 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

3. 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

4. Ç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.

1. 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.
2. Komut Menüsünde Rendering yazmaya başlayın ve Oluşturmayı Göster'i seçin.

3. 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

4. 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?

1. Ö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

2. 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

3. 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ı

   Not: Yakınlaştırmanın diğer bir yolu da arka planını tıklayarak veya bir etkinliği seçerek Ana bölüme odaklanmak, ardından W, A, S ve D tuşlarına basmaktır.

4. 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.

   Not: Animasyon Karesi Tetiklendi etkinliği, bir requestAnimationFrame() geri çağırma her yürütüldüğünde oluşur.

5. 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

   Not: Bir etkinliği seçtikten sonra, yanındaki etkinlikleri seçmek için ok tuşlarını kullanın.

6. 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.

7. Ö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ı

   Not: Bu koddaki sorun, her animasyon karesinde her karenin stilini değiştirmesi ve ardından sayfadaki her karenin konumunu sorgulamasıdır. Stiller değiştiğinden, tarayıcı her bir karenin konumunun değişip değişmediğini bilmez. Bu nedenle, konumunu hesaplamak için karenin yerini yeniden ayarlaması gerekir. Daha fazla bilgi edinmek için Zorunlu eşzamanlı düzenleri önleme bölümüne bakın.

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.

Not: Optimize edilmiş bu sürüm bile pek iyi sonuç vermez çünkü her karenin top özelliğini hâlâ değiştirir. Yalnızca birleştirmeyi etkileyen özellikleri kullanmaya devam etmek daha iyi bir yaklaşımdır. Daha fazla bilgi için Animasyonlar için dönüşüm ve opaklık değişikliklerini kullanma bölümüne bakın.

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