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

Jecelyn Yeen

Nancy Li

JavaScript Profiler paneli, Chrome 124'te kullanımdan kaldırılacak. Bu tarihten sonra Node.js CPU performansını incelemek için Performans panelini kullanın.

JavaScript Profiler'ı neden kullanımdan kaldırıyoruz? (JS Profil Aracı)

Geliştirici Araçları ekibi, Chrome 58'den itibaren JS Profiler'ı kullanımdan kaldırmayı planlıyordu. Bunun birkaç nedeni vardır:

• Artık aktif olarak geliştirilmemektedir. JS Profil Aracı birkaç yıldır önemli güncelleme almadı ve ekibin onu geliştirmeye devam edecek kaynaklara sahip değil.
• Daha kolay bir profil oluşturma 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. Google Analytics 4'ü, yeni özellikler ve geliştirmeler ekleyerek geliştirmeye devam ediyoruz. Bu sayede, YouTube aracını performans analizi için daha güçlü ve kullanıcı dostu bir araç haline getiriyoruz.

Desteği sonlandırdıktan sonra ne yapmanız gerekir?

JavaScript CPU performansının nasıl profil açılacağı hakkında daha fazla bilgi edinmek için Profile Node.js performansı sayfasına bakın.

Aşağıda Performans panelinin kullanımıyla ilgili bazı ipuçları verilmiştir:

• Performans sorunlarını tespit etmek için flame grafiğini kullanın.

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

Desteğin sonlandırılmasıyla nasıl başa çıkacağız?

Geliştiricilerden geri bildirim istemek için bir prototip geliştirdik ve Request for Comments (RFC) [Yorum İsteği (RFC)] özelliğini 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.

JS Profil Aracı'nı 4 aşamada aşamalı olarak kullanımdan kaldırıyoruz. Bu sayede, geliştiricilere uyum sağlamaları ve benimsemeleri için yeterli zaman tanınması amaçlanıyor.

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

Aldığımız geri bildirimlerden en öncelikli endişeleri şu üç ana soruna odaklanıyordu:

• .cpuprofile dosya biçimi destekleniyor. JS Profiler farklı bir dosya biçimi kullanır. Performans paneli bunu desteklemelidir.
• Yavaş yükleme hızı. Panelin yükleme hızı düşük olduğu için profil oluşturma sürecini etkiliyor.
• JavaScript sanal makine seçici eksik. Belirli senaryolarda JavaScript sanal makine örnek seçicisinin sınırlı profil oluşturma yeteneklerinin bulunmaması.

Şimdi bu sorunların her birine tek tek göz atıp onları nasıl düzelttiğimizi görelim.

Yavaş yükleme hızı

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

Geliştirici Araçları'nı analiz etmek için Geliştirici Araçları'nı kullandık (buna "Geliştirici Araçları" adını veriyoruz). 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ı kullanımını azaltmak amacıyla yinelemeli işlevler (döngüler için) olarak yeniden düzenlendi.

Bu sorunları düzelterek büyük dosyalar için yüklemeyi% 80 daha hızlı hale getirdik! 🎉

Ş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çicisi eksikti. Geliştiriciler, ayrıntılı inceleme yapmak ve belirli bir sanal makine örneğini analiz etmeye odaklanmak için bunu 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.

cpuprofile dosya biçimi destekleniyor

Daha önce, Performans paneli yalnızca bir dizi izleme etkinliğine sahip JSON dosyaları olan izleme dosyalarını destekliyordu.

Diğer yandan, JS Profiler CPU profillerini destekler. Bunlar, JSON nesnesi içeren .cpuprofile uzantısına sahip dosyalardır. Bu düğmeler aşağıdaki gibi 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 desteklemektedir. cpuprofile dosyasını Performance'a aktarabilirsiniz. Dosya doğru şekilde yüklenir.

Perde arkasında, normal bir ifade kullanarak nesne yapısı farklılıklarını tespit ederiz. Dosya içeriği {"nodes":[ ile başlıyorsa bu bir CPU profilidir. Aksi takdirde bu bir izleme dosyasıdır.

İçeriğin türü belirlendikten sonra içeriği buna göre işleriz. İzleme dosyası için etkinlikleri ayrıştırıp bir zaman çizelgesi oluştururuz. CPU profili için JSON nesnesini ayrıştırır ve bir flame 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

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

• Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
• Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.