JS Profiler'a veda, Performans paneliyle CPU profili oluşturma

Jecelyn Yeen
Nancy Li
Nancy Li
LinkedIn

JavaScript Profil Aracı paneli, Chrome 124'te kullanımdan kaldırılıyor. Ardından, Node.js CPU performansını profillemek için Performans panelini kullanın.

JavaScript Profil Aracı'na desteği neden sonlandırıyoruz? (JS Profil Aracı)

DevTools ekibi, Chrome 58'den itibaren JS Profiler'ın desteğini sonlandırmayı planlıyordu. Bunun birkaç nedeni vardır:

  • Artık aktif olarak geliştirilmiyor. JS Profiler birkaç yıldır önemli bir güncelleme almıyor ve ekibin bu aracı geliştirmeye devam edecek kaynakları yok.
  • Daha basit bir profil oluşturma deneyimi. Performans paneli zaten her türlü performans analizi için kullanılmaktadır. Node.js'de JavaScript CPU performansını profilleyebilme özelliği sayesinde tutarlılık ve verimlilik için her şeyi tek bir yerde toplamanın mantığı vardır.
  • Performans paneli daha iyidir. Yeni özellikler ve geliştirmeler ekleyerek performans analizi için daha güçlü ve kullanıcı dostu bir araç hâline getiriyoruz.

Desteği sonlandırılan sürümden sonra ne yapmalısınız?

JavaScript CPU performansının nasıl profilleneceği hakkında daha fazla bilgi edinmek için Node.js performansını profilleme başlıklı makaleyi inceleyin.

Performans panelini kullanmayla ilgili bazı ipuçları:

  • Performans darboğazlarını tespit etmek için alev grafiğini kullanın.

Flame grafiği.

  • İşlevler arasındaki ilişkileri anlamak için Aşağıdan yukarı ve Çağrı ağacı sekmelerini kullanın.

Aşağıdan yukarıya sekmesi.

Çağrı ağacı sekmesi.

Desteği sonlandırma işlemini nasıl yönetiriz?

Bir prototip geliştirdik ve geliştiricilerden geri bildirim almak için Yorum İsteği (RFC)'ni GitHub'da herkese açık olarak yayınladık.

Bununla birlikte, prototipi test etmek için geliştirici uzmanlarıyla aktif olarak iletişime geçerek Performans panelinin temel profil oluşturma ihtiyaçlarını karşıladığından emin olmak için endişeleri veya sorunları gideririz.

Geliştiricilerin uyum sağlamak ve yeni araçları benimsemek için yeterli zamanı olması amacıyla JS Profiler'ı 4 aşamada kademeli olarak kullanımdan kaldırıyoruz.

Önemli sorunlar ve bunları nasıl düzelttik

Aldığımız geri bildirimler arasında en acil endişeler üç ana konuyla ilgiliydi:

  • .cpuprofile dosya biçimini destekler. JS Profiler farklı bir dosya biçimi kullanır. Performans paneli bunu desteklemelidir.
  • Yavaş yükleme hızı. Panelin yükleme hızı yavaştı ve profil oluşturma sürecini etkiliyordu.
  • JavaScript VM seçicisi eksik. JavaScript VM örneği seçicisinin olmaması, belirli senaryolarda profil oluşturma özelliklerini sınırlıyordu.

Bu sorunların her birine göz atıp nasıl düzelttiğimize bakalım.

Yavaş yükleme hızı

Geliştiriciler, Performans panelinin büyük veri dosyalarını yüklemesinin çok uzun sürdüğünü ve bazen kilitlendiğini söyledi.

Geliştirici Araçları'nı analiz etmek için Geliştirici Araçları'nı kullandık (buna "Geliştirici Araçları'nda Geliştirici Araçları" diyoruz). Sorunlar tespit ettik ve çeşitli optimizasyonlar yaptık:

  • Set, Array veri yapılarıyla değiştirildi.
  • Gereksiz Map veri yapıları kaldırıldı.
  • Bellek yığınının kullanımını azaltmak için yinelemeli (for döngüleri) olacak şekilde yeniden yapılandırılmış yinelemeli işlevler.

Bu darboğazları düzelterek büyük dosyaları% 80 daha hızlı yüklemeyi başardık. 🎉

Edindiğimiz bilgiler hakkında daha fazla bilgi için Performans algısı sayesinde% 400 daha hızlı performans paneli başlıklı blog yayınını okuyun.

Eksik JavaScript VM seçici

İlk prototipte JavaScript sanal makine seçici eksikti. Geliştiriciler, belirli bir sanal makine örneğini analiz etmeye odaklanmak için bu özelliği kullanır.

Performans paneline JavaScript sanal makine seçici ekledik. Mevcut tüm JavaScript sanal makine örneklerinin açılır listesini gösterir. Bir örneği seçtiğinizde Performans paneli, söz konusu örneğin CPU profilini yükler.

Çağrı ağacı sekmesi.

cpuprofile dosya biçimini destekleme

Daha önce Performans paneli yalnızca bir izleme etkinliği dizisi içeren JSON dosyaları olan izleme dosyalarını destekliyordu.

Öte yandan JS Profiler, JSON nesnesi içeren .cpuprofile uzantılı dosyalar olan CPU profillerini destekler. Bu emojiler şu şekilde görünür:

{
    // The list of profile nodes. First item is the root node.
    nodes: ProfileNode[];
    // Profiling start timestamp in microseconds.
    startTime: number;
    // Profiling end timestamp in microseconds.
    endTime: number;
    // Ids of samples at top nodes.
    samples?: integer[];
    // Time intervals between adjacent samples in microseconds.
    // The first delta is relative to the profile startTime.
    timeDeltas?: integer[];
}

Yeni iş akışı, geliştiricilerin mevcut cpuprofile'yi analiz etmesini engellememelidir. Bu nedenle, Performans paneli artık hem izleme dosyalarını hem de CPU profillerini destekliyor. cpuprofile dosyasını Performans'a aktarabilirsiniz. Dosya doğru şekilde yüklenir.

Arka planda, normal ifade kullanarak nesne yapısı farklılıklarını tespit ederiz. Dosya içeriği {"nodes":[ ile başlıyorsa CPU profilidir. Aksi takdirde iz dosyası olur.

İçeriğin türü belirlendikten sonra içeriği buna göre işleriz. Bir izleme dosyasında, etkinlikleri ayrıştırıp zaman çizelgesi oluştururuz. CPU profili için JSON nesnesini ayrıştırır ve bir alev grafiği oluştururuz.

Sonuç

Hem web siteleri hem de Node.js ve Deno uygulamalarındaki CPU performansını profillemek için daha basit bir profil oluşturma deneyimi için Performans panelini kullanın.

Geri bildiriminiz veya öneriniz varsa bu hataya yorum ekleyin veya aşağıdaki seçeneklerden birini kullanarak bize ulaşın.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.