Flame graph
- Node.js kursu
- Uzman
- Ders 37/47
- 5 dk
Flame graph ve CPU profiling öğrenirsin.
Flame graph nedir?
Bir flame graph (alev grafiği), CPU profilleme sonucunu görselleştirir. Yatay eksen örnek sayısını, dikey eksen çağrı yığını derinliğini gösterir. Her fonksiyon bir dikdörtgenle çizilir; genişliği ne kadar çok zaman harcandığını gösterir.
Bir flameWidth(samples, total) fonksiyonu bu genişliği modeller: örnek sayısını toplam sayıya bölüp 100 ile çarpar ve yüzde olarak döndürür. Örnek: flameWidth(25, 100) '25%' döner. Math.round sonucu tam sayıya yuvarlar. Bu model, alev grafiğinin temel hesabını gösterir; gerçek araçlar (0x, clinic.js) binlerce örnekten tam grafik üretir ama her kutunun genişliği aynı formülle çıkar.
Yığın derinliği
Flame graph'ın dikey ekseni yığın derinliğidir (stack depth). Her satır bir çağrı çerçevesidir; üstteki alttakini çağırmıştır. Dar ve uzun bir kule, derin bir özyineleme ya da zincirleme çağrıya işaret eder.
Genişlik ise o çerçevenin ne kadar süre görüldüğüdür. flameWidth(25, 100) '25%' döner; bu, fonksiyonun toplam örneklerin dörtte birinde yığında görüldüğü anlamına gelir. Bir alev grafiği okurken önce en geniş kutuyu bulursun; bu, optimizasyon için en çok kazanç getirecek yerdir. Yığın derinliği o fonksiyona nasıl ulaşıldığını anlatır. Bu iki eksen birlikte darboğazı hem konum hem büyüklük olarak gösterir.
Uygulama Flame width fonksiyonu yaz
function flameWidth(samples, total) yaz. const pct = Math.round((samples / total) * 100) tanımla. return pct + '%' ile döndür. console.log(flameWidth(25, 100)) ve console.log(flameWidth(50, 100)) yazdır.
Başlangıç kodu
// flameWidth fonksiyonu yaz
// örnek sayısını toplam sayıya böl, 100 ile çarp, yuvarla ve yüzde olarak döndür
// 25 ve 100, 50 ve 100 çağrılarını yazdır
// buraya yazÖrnek çözüm
function flameWidth(samples, total) {
const pct = Math.round((samples / total) * 100);
return pct + '%';
}
console.log(flameWidth(25, 100));
console.log(flameWidth(50, 100));Beklenen çıktı
25% 50%
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Flame graph'te bir kutunun genişliği neyi gösterir?
flameWidth(25, 100)- Çağrı derinliğini
- Bellek kullanımını
- Harcanan zamanı (örnek sayısı) Doğru cevap
- Disk gecikmesini
Açıklama: Genişlik harcanan zamanı, yani örnek sayısını gösterir.
2 Yüzde dönüşünü tamamla
return pct + '____';return pct + '%';Açıklama: Yüzde işareti ile dize tamamlanır.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
samples |
Örnek sayısı |
Math.round |
Yuvarlar |
total |
Toplam örnek |
'%' |
Yüzde işareti |