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

Kayce Basques

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 gösterdiği performansla ilgilidir. 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 açısından, 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 almaktadır. Chrome'un başka bir sürümünü 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ı görmek için chrome://help sitesine göz atın.

Başlayın

Bu eğiticide, canlı bir sayfada Geliştirici Araçları'nı açacak ve sayfadaki 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österiliyor.

   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. Demo, solda ve Geliştirici Araçları sağda

   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 her oluşturduğunuzda, sayfanızın 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 etkin olduğundan emin olun.
3. Yakalama Ayarları'nı tıklayın. Geliştirici Araçları, performans metriklerini yakalama şekliyle ilgili ayarları gösterir.

4. CPU için 2x yavaşlama'yı seçin. Geliştirici Araçları, CPU'nuzu normalden 2 kat daha yavaş çalışacak şekilde kısıtlar.

   

   2. Şekil. CPU kısıtlaması, mavi renkle belirtilmiştir

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

Demoyu ayarlama

Bu web sitesinin tüm okuyucuları için tutarlı bir şekilde çalışan bir çalışma zamanı performansı demosu oluşturmak zor. Bu bölüm, belirli 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'yi 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 yumuşak hareket eder.

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

3. Optimize Etmeyi Kaldır'ı tıklayın. Mavi kareler daha yavaş hareket eder ve tekrar daha fazla duraklamaya sahiptir.

Ç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 ettireceği varsayılır. 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. Geliştirici Araçları 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 düşük olduğunu ölçebilir ve nedenlerini bulabilirsiniz.

Saniyedeki kare sayısını analiz etme

Animasyonların performansını ölçmek için kullanılan ana metrik, saniyedeki kare sayısıdır (FPS). Animasyonlar 60 FPS hızında çalıştırıldığında kullanıcılar memnundur.

1. FPS grafiğine bakın. FPS'nin üzerinde kırmızı bir çubuk gördüğünüzde bu, 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 de o kadar yüksek olur.

   

   Şekil 5: Mavi anahatlı FPS grafiği

2. FPS grafiğinin altında CPU grafiğini görürsünüz. CPU grafiğindeki renkler, Performans panelinin alt kısmında bulunan Özet sekmesindeki renklere karşılık gelir. CPU grafiğinin renkli olması, CPU'nun kayıt sırasında maksimuma ulaştığı anlamına gelir. CPU'nun uzun süreler boyunca en üst seviyede kaldığını gördüğünüzde bu, daha az iş yapmanın yollarını bulmaya yönelik bir işarettir.

   

   Şekil 6: Mavi anahatlı CPU grafiği ve Özet sekmesi

3. Farenizi FPS, CPU veya NET grafiklerinin üzerine getirin. DevTools sayfanın 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 ilerlemesinin manuel olarak analiz edilmesinde yararlıdır.

   

   Şekil 7: Sayfanın ekran görüntüsünü kaydın 2.000 ms. sonrasında görüntüleme

4. Çerçeveler bölümünde, farenizi yeşil karelerden birinin üzerine getirin. Geliştirici Araçları, ilgili karenin FPS değerini gösterir. Her kare muhtemelen 60 FPS hedefinin çok altındadır.

   

   Şekil 8: Çerçeve üzerine gelme

Elbette, bu demo sayesinde sayfanın iyi performans göstermediği oldukça barizdir. Ancak, gerçek senaryolarda her şey çok açık olmayabilir. Bu nedenle, ölçüm yapmak için bu araçların tümüne sahip olmak işinize yarayabilir.

Bonus: FPS sayacını açın

Kullanışlı bir diğer araç ise sayfa çalışırken FPS için gerçek zamanlı tahminler sağlayan FPS ölçer.

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. Rendering (Oluşturma) sekmesinde FPS Meter'ı (FPS Meter) etkinleştirin. Görüntü alanınızın sağ üst köşesinde yeni bir yer paylaşımı görünür.

   

   Şekil 9: FPS ölçer

4. FPS Meter'ı devre dışı bırakın ve Rendering (Oluşturma) sekmesini kapatmak için Escape tuşuna basın. Bu eğitimde bu adı kullanmayacaksınız.

Tıkanıklığı bulun

Animasyonun iyi performans göstermediğini ölçüp doğruladığınıza göre, cevaplamanız gereken bir sonraki soru şudur: Neden?

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

   

   Şekil 10: Mavi anahatlı Özet sekmesi

2. Main (Ana) bölümünü genişletin. Geliştirici Araçları, ana iş parçacığındaki etkinliklerin zaman içindeki grafiğini gösterir. X ekseni, kaydın zaman içindeki değişimini gösterir. Her çubuk bir etkinliği temsil eder. Daha geniş bir çubuk etkinliği daha uzun sürer. Y ekseni, çağrı yığınını gösterir. Etkinliklerin birbirinin üzerine yığılmış olması, üstteki etkinliklerin daha düşük etkinliklere neden olduğu anlamına gelir.

   

   Şekil 11: Mavi dış çizgili 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 bölümüyle 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 bir başka yolu da, arka planını tıklayarak veya bir etkinliği seçerek Ana bölüme odaklanmak ve ardından W, A, S ve D tuşlarına basmaktır.

4. Animasyon Karesi Tetiklendi etkinliğinin sağ üst kısmındaki kırmızı üçgene dikkat edin. Kırmızı bir üçgen gördüğünüzde bu, söz konusu etkinlikle ilgili bir sorun olabileceğine dair bir uyarıdır.

   Not: requestAnimationFrame() geri çağırma her yürütüldüğünde Animasyon Karesi Tetiklendi etkinliği gerçekleşir.

5. Animasyon Karesi Tetiklendi etkinliğini tıklayın. Özet sekmesi artık bu etkinlikle ilgili bilgileri gösterir. Belirt bağlantısını not 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. Ayrıca app.js:94 bağlantısına da dikkat edin. Bu seçeneği tıkladığınızda kaynak kodda 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çok mor etkinlik görünür. Daha geniş olsaydılar, sanki her birinde üzerinde kırmızı bir üçgen vardımuş gibi görünür. Ş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ışlar (düzen anlamına gelen başka bir kelime) ile 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 karenin konumunun değişip değişmediğini bilmez. Bu nedenle, konumunu hesaplamak için kareyi yeniden düzenlemesi gerekir. Daha fazla bilgi edinmek için Zorunlu eşzamanlı düzenleri önleme bölümüne bakın.

Bora Oldukça zorlu bir süreç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. İyileştirilmiş kare hızından Ana bölümün flame grafiğindeki etkinliklerdeki azalmaya kadar, uygulamanın optimize edilmiş sürümünün çok daha az iş yaptığını ve bu sayede daha iyi performans sağladığını görebilirsiniz.

Not: Bu optimize edilmiş sürüm bile her karenin top özelliğini işlemeye devam ettiği için o kadar da iyi değildir. Yalnızca birleştirmeyi etkileyen özellikleri kullanmak daha iyi bir yaklaşım olur. Daha fazla bilgi için Animasyonlarda dönüşüm ve opaklık değişikliklerini kullanma konusuna 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 Modeli ile Performansı Ölçme bölümüne bakın.

Alıştırma yapmak, Performans panelini daha rahat kullanmak için mükemmelleştirir. Kendi sayfalarınızın profilini oluşturmayı ve sonuçları analiz etmeyi deneyin. Sonuçlarınızla ilgili sorunuz olursa google-chrome-devtools ile etiketlenmiş bir Stack Overflow sorusu açın. Mümkünse ekran görüntüleri 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 (Bir Karenin Anatomisi) bu konuyu daha da ayrıntılı bir şekilde ele alıyor.

Son olarak, çalışma zamanı performansını artırmanın birçok yolu vardır. Bu eğitim, size Performans panelinde odaklanan bir tur sunmak için belirli bir animasyon performans sorununa odaklanmıştır. Ancak bu, karşılaşabileceğiniz pek ç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üzen Bozukluğundan Kaçının
• Boya Karmaşıklığını Basitleştirin ve Boyama Alanlarını Azaltın
• Yalnızca Birleşik Mülklere Bağlı Kalma ve Katman Sayısını Yönetme
• Giriş İşleyicilerinizi Artırın