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

Merhaba. Ben, Geliştirici Araçları'nın teknoloji yazarı Kayce. Bu DevTools Özeti'nde biraz değişiklik yapıp son birkaç Chrome sürümünde DevTools'ta yapılan performans araçlarıyla ilgili iyileştirmeleri özetlemek istedim.

Aksi belirtilmedikçe tüm özellikler Chrome'un kararlı sürümünde mevcuttur.

Mobil öncelikli bir dünya için CPU kısıtlaması

Chrome 54'te (şu anda Canary) kullanılabilir.

Yazılım dünyayı, 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şiyor. DevTools'un mobil öncelikli araç setindeki en son geliştirme, CPU tarama hızını düşürme özelliğidir. Sitenizin kaynak açısından sınırlı cihazlarda nasıl performans gösterdiği hakkında daha fazla bilgi edinmek için bu özelliği kullanın.

Geliştirme makinenizin bilgi işlem gücünü azaltmak için Zaman Çizelgesi panelindeki CPU Yavaşlatma açılır menüsünden bir seçenek belirleyin.

ALT_TEXT_HERE

CPU sınırlamasıyla ilgili bazı notlar:

  • Daraltma, tıpkı ağ daraltma gibi hemen geçerli olur ve siz devre dışı bırakana kadar devam eder.
  • Bu özellik, sitenizin kaynak kısıtlaması olan bir cihazda nasıl performans göstereceği hakkında genel bilgi edinmenizi sağlar. DevTools'un, çip üzerinde mobil sistemin performans özelliklerini gerçek anlamda taklit etmesi imkansızdır.
  • Yavaşlatma, geliştirme makinenize göredir. Diğer bir deyişle, üst düzey bir masaüstünde 5 kat azaltma işleminin sonucu, beş yaşındaki uygun fiyatlı bir dizüstü bilgisayarda 5 kat azaltma işleminin sonucundan farklı olacaktır.

Bununla birlikte, CPU sarmalayıcıyı ağ sarmalayıcı ve cihaz moduyla birleştirdiğinizde, sitenizin mobil cihazlarda nasıl görüneceği ve performans göstereceği hakkında daha iyi bir fikir edinmeye başlarsınız. Üstelik bunu geliştirme makinesi tarayıcınızdan kolayca yapabilirsiniz.

Zaman çizelgesi kayıtlarında ağ görünümü

Sayfanızın kaynaklarını nasıl indirdiğini analiz etmek için bir sonraki Zaman Çizelgesi kaydınızda onay kutusunu etkinleştirin. Özet bölmesinde bir kaynakla ilgili daha fazla bilgi görüntülemek için kaynağı tıklayın.

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

Özetteki Başlatıcı alanı özellikle yararlıdır. Bu alan, kaynağın nereden istendiğini belirtir.

Pasif etkinlik işleyiciler

Pasif etkinlik işleyicileri, kaydırma performansını iyileştirmek için yeni ortaya çıkan bir standarttır. Daha fazla bilgi edinmek için yazdığım şu makaleye göz atın:

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

Geliştirici Araçları, biraz {passive: true} sevgiden yararlanabilecek dinleyicileri bulmanıza yardımcı olacak birkaç özellik kullanıma sundu.

Öncelikle, senkronize bir dinleyici makul olmayan bir süre boyunca sayfa kaydırma işlemini engellediğinde Console bir uyarı verir.

Eşzamanlı dinleyici uyarısı

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

Dokunma/tekerlek işleyicileri nedeniyle kaydırmadaki takılma demo

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

Pasif dinleyici filtresi

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

Pasif modu açma/kapatma

Bu bölümü bir ipucu ile 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, sayfanın bu bölümüne bağlı ve kaydırma performansını olumsuz yönde etkileyebilecek bir dinleyici olduğu anlamına gelir.

Kaydırma performansı sorunları demosu

Etkinliğe göre gruplandır

Haziran ayının ortalarında, Zaman Çizelgesi panelindeki Çağrı Ağacı bölmesine yeni bir sıralama kategorisi eklendi: Etkinliğe göre gruplandır. Bu gruplandırma, sayfanızın HTML'yi ayrıştırmak, komut dosyalarını değerlendirmek, boyamak vb. için ne kadar zaman harcadığını görüntülemenizi sağlar.

Etkinliğe göre gruplandır

Kaynaklar panelindeki zaman çizelgesi istatistikleri

JS Profili seçeneği etkinken bir zaman çizelgesi kaydı oluşturun. Kaynaklar panelinde, yürütme sürelerinin işleve göre dökümünü görebilirsiniz.

Kaynaklar panelindeki zaman çizelgesi istatistikleri

Bakış açınızı paylaşın

Her zaman olduğu gibi, DevTools ile ilgili geri bildirimlerinizi veya fikirlerinizi öğrenmekten memnuniyet duyarız.

Görüşmek üzere.