Geliştirici Araçları Özeti, Eylül 2016 - Perf Özeti

Hallo! Adım Kayce, Geliştirici Araçları'nda teknoloji yazarıyım. Bu DevTools Özeti için biraz değişiklik yapıp son birkaç Chrome sürümünde DevTools'daki performans araçlarıyla ilgili bazı iyileştirmeleri özetlemeyi düşündüm.

Aksi belirtilmediği sürece tüm özellikler zaten Chrome'un Mevcut Ürün sürümündedir.

Mobil cihazlara öncelik veren bir dünyada CPU kısıtlaması

Şu anda Canary olarak bilinen Chrome 54'te kullanılabilir.

Yazılım dünyayı yiyor, mobil ise yazılımı yiyor. DevTools, mobil cihazlara öncelik veren bir geliştirme dünyasının ihtiyaçlarını daha iyi karşılamak için sürekli olarak gelişmektedir. DevTools'un mobil öncelikli araçlarındaki en son geliştirme CPU Kısıtlamasıdır. Sitenizin kaynakları kısıtlı cihazlarda nasıl performans gösterdiğini daha iyi anlamak için bu özelliği kullanın.

Geliştirme makinenizin bilgi işlem gücünü sınırlandırmak için Zaman Çizelgesi panelindeki CPU Sınırlaması açılır menüsündeki seçeneklerden birini belirleyin.

ALT_TEXT_HERE

CPU kısıtlamasıyla ilgili bazı notlar:

  • Kısıtlama, ağ sınırlamada olduğu gibi hemen devreye girer ve siz devre dışı bırakana kadar devam eder.
  • Bu özellik, sitenizin kaynakları kısıtlı bir cihazda büyük olasılıkla nasıl performans göstereceğine ilişkin genel bilgi vermek içindir. Geliştirici Araçları'nın, çip üzerinde bir mobil sistemin performans özelliklerini gerçekten taklit etmesi imkansızdır.
  • Kısıtlama, geliştirme makinenize bağlıdır. Diğer bir deyişle, birinci sınıf bir masaüstü bilgisayar üzerinde 5 kat sınırlama, beş yıllık bütçelerine sahip bir dizüstü bilgisayarda 5 kat sınırlamadan farklı sonuçlar verir.

Bununla birlikte, CPU Kısıtlaması'nı Ağ Kısıtlaması ve Cihaz Modu ile birlikte kullandığınızda, geliştirme makinesi tarayıcınızın rahatlığından yararlanarak sitenizin mobil cihazlarda nasıl görüneceği ve performansı hakkında çok daha iyi fikir edinmeye başlayabilirsiniz.

Zaman çizelgesi kayıtlarında ağ görüntüleme

Sayfanızın kaynaklarını nasıl indirdiğini analiz etmek için bir sonraki Zaman Çizelgesi kaydı çekişinizde onay kutusunu etkinleştirin. Özet bölmesinde bir kaynağı tıklayarak hakkında daha fazla bilgi görüntüleyebilirsiniz.

Zaman Çizelgesi'nde ağ görünümü

Özetteki Başlatan alanı özellikle kullanışlıdır. Bu alan, kaynağın nerede istendiğini belirtir.

Pasif etkinlik işleyiciler

Pasif etkinlik işleyiciler, kaydırma performansını iyileştirmek için yeni çıkan standartlardan biridir. Daha fazla bilgi edinmek için kendi yazınıza göz atın:

Pasif etkinlik işleyicilerle kaydırma performansını iyileştirme

Geliştirici Araçları, {passive: true} tarzından yararlanabilecek dinleyicileri bulmanıza yardımcı olmak için birkaç özellik sundu.

Öncelikle, eşzamanlı bir işleyici sayfa kaydırma işlemini makul olmayan süreler boyunca engelliyorsa Console bir uyarı verir.

Eşzamanlı dinleyici uyarısı

Aşağıdaki demoda bunu kendiniz test edebilirsiniz:

Dokunmatik/tekerlek işleyicileri demosu nedeniyle kaydırma sorunu

Ardından, pasif veya engelleyen dinleyicileri filtrelemek için Etkinlik İşleyiciler bölmesindeki küçük açılır menüyü kullanabilirsiniz.

Pasif işleyici filtresi

Son olarak, bir işleyicinin pasif veya engelleme durumunu üzerine gelip Pasif Ayarı Değiştir'e basarak değiştirebilirsiniz. Bu özellik şu anda touchstart, touchmove, mousewheel ve wheel etkinlik işleyicileri ile sınırlıdır.

Pasifi aç/kapat

Bu bölümü küçük bir ipucuyla bitireceğim. Olası kaydırma sorunlarının görsel bir temsilini almak için Oluşturma çekmecesinde Kaydırma Performansı Sorunları onay kutusunu etkinleştirin. Bir sayfanın bir bölümü vurgulandığında bu, sayfanın ilgili bölümüne bağlı bir işleyici olduğu anlamına gelir. Bu işlev, kaydırma performansını olumsuz etkileyebilir.

Kaydırma performansı sorunları demosu

Etkinliğe göre gruplandır

Haziran ayının ortasında, Zaman Çizelgesi panelindeki Arama Ağacı bölmesi yeni bir sıralama kategorisi aldı: Etkinliğe Göre Gruplama. Bu gruplandırma, sayfanızın HTML ayrıştırma, komut dosyalarını değerlendirme, boyama vb. işlemler için ne kadar süre harcadığını görüntülemenize olanak tanır.

Etkinliğe göre gruplandır

Kaynaklar panelindeki zaman çizelgesi istatistikleri

JS Profili seçeneği etkin durumdayken Zaman Çizelgesi kaydı oluşturun. Kaynaklar panelinde yürütme sürelerinin işlev bazında dökümünü görebilirsiniz.

Kaynaklar panelindeki zaman çizelgesi istatistikleri

Görüşünüzü paylaşın

Her zaman olduğu gibi, Geliştirici Araçları ile ilgili herhangi bir konuda geri bildirimlerinizi veya fikirlerinizi öğrenmek isteriz.

  • Kısa sorular veya geri bildirimler için ya da yeni fikirleri paylaşmak için Twitter'da ChromeDevTools'dan bize ping gönderin.
  • Daha uzun tartışmalar için ise posta listesi veya Stack Overflow'u kullanabilirsiniz.
  • Dokümanlarla ilgili tüm konular için dokümanlar depomuzda sorun kaydı açın.

Gelecek ay görüşmek üzere!