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. Bu tarihten sonra Node.js CPU performansını incelemek 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 almadı ve ekibin bu aracı geliştirmeye devam edecek kaynakları yok.
  • Daha kolay bir profil çıkarma deneyimi. Performans paneli şu anda her türlü performans analizinde kullanılmaktadır. Dolayısıyla Node.js'de JavaScript CPU performansı profili sayesinde tutarlılık ve verimlilik için her şeyi tek bir yerde birleştirmek mantıklıdı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 API'leri kullanmayı bıraktıktan 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 sorunlarını tespit etmek için flame 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.

Bunların yanı sıra, Performans panelinin temel profil çıkarma ihtiyaçlarını karşıladığından emin olmak için prototipi test etmeleri amacıyla geliştirici uzmanlarıyla etkin bir şekilde iletişime geçerek tüm endişeleri veya sorunları ele alıyoruz.

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ısı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. 🎉

Şu blog yayınında öğrendiklerimiz hakkında daha fazla bilgi edinebilirsiniz: Performans yoluyla% 400 daha hızlı bir performans paneli.

Eksik JavaScript sanal makine 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 bir JavaScript sanal makine seçici ekledik. Mevcut tüm JavaScript sanal makine örneklerinin açılır listesini gösterir. Bir örnek seçtiğinizde Performans paneli, söz konusu örnek iç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 analizini 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 sitelerinde hem de Node.js ve Deno uygulamalarında CPU performansında daha kolay bir profil oluşturma deneyimi için Performans panelini kullanın.

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

Önizleme kanallarını indirme

Chrome Canary, Yeni geliştirilenler veya Beta'yı varsayılan geliştirme tarayıcınız olarak kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.