Başarım Kaydı

Ağ paneli isteğin ne zaman bittiğini söyler, yanıt geldikten sonra sayfanın neden hâlâ donuk kaldığını söylemez. Ölçüm listesi indirildiği hâlde ekranın geç güncellenmesinin nedeni ağda değil, tek bir iş parçacığında sıraya girmiş işlerdedir.

Bu ders, o sıranın zaman içindeki dökümünü üreten başarım kaydını ve okunma biçimini ele alır.

Kayıt Ne Toplar

Kayıt tek bir liste değil, aynı zaman ekseni üzerine dizilmiş birkaç izdir.

Ana iş parçacığı izi en yoğun olanıdır: her görevin ne zaman başladığını, ne kadar sürdüğünü ve içinde hangi çağrıların bulunduğunu taşır. Çizim izi hangi karelerin zamanında üretildiğini gösterir. Ağ izi isteklerin zaman eksenindeki yerini verir ve önceki dersteki listenin zamanla hizalanmış hâlidir. İm ve ölçüm izi ise kaydın çalıştığı koddan gelen etiketleri taşır.

İzlerin aynı eksende olması kaydın asıl değeridir: bir isteğin bitişiyle ekrandaki değişimin arasındaki boşluk, ancak iki iz yan yana konduğunda görülür.

Tek Sıra: Ana İş Parçacığı

Tarayıcının sayfa başına yürüttüğü işlerin çoğu tek bir sırayı paylaşır: HTML ayrıştırması, biçem hesabı, yerleşim, boyama hazırlığı ve bütün betikler. Eşzamansız JavaScript ve Çalışma Zamanı kursundaki Olay Döngüsü dersinde kurulan model burada görsel karşılığını bulur; kaydın gösterdiği şey o kuyruğun gerçekleşmiş hâlidir.

Sıranın tek olması iki sonuç doğurur. Bir görev sürerken kullanıcı girdisi işlenemez; tıklama kaydedilir ama yanıt gecikir. Ve bir görev sürerken yeni bir kare üretilemez; animasyon durur.

Örnekleme ve Alev Grafiği

Ana iş parçacığı izi çoğunlukla örneklemeyle toplanır: kaydedici sabit aralıklarla çağrı yığıtının o anki hâlini kaydeder. Alev grafiği bu örneklerden türetilir. Yatay genişlik süredir; dikey derinlik zaman değil, çağrı iç içeliğidir.

Grafikten okunan iki sayı vardır ve karıştırılmaları yanlış eniyilemeye yol açar.

// ornekleme.mjs — ornek yiginlarindan kendi suresi ve toplam sure hesabi
const ARALIK = 1; // ms: ornekleyici her 1 ms'de bir cagri yiginini kaydeder

// Her satir, o anki cagri yigini (en distan en ice).
const ornekler = [
  ["kok", "olcumleriCiz"],
  ["kok", "olcumleriCiz", "satirKur"],
  ["kok", "olcumleriCiz", "satirKur"],
  ["kok", "olcumleriCiz", "satirKur", "tarihBicimle"],
  ["kok", "olcumleriCiz", "satirKur", "tarihBicimle"],
  ["kok", "olcumleriCiz", "satirKur", "tarihBicimle"],
  ["kok", "olcumleriCiz", "satirKur"],
  ["kok", "olcumleriCiz", "esikHesapla"],
  ["kok", "olcumleriCiz", "esikHesapla"],
  ["kok", "kutugeYaz"],
];

const toplam = new Map();
const kendi = new Map();
const artir = (harita, ad) => harita.set(ad, (harita.get(ad) ?? 0) + ARALIK);

for (const yigin of ornekler) {
  for (const ad of new Set(yigin)) artir(toplam, ad); // her cerceve icin toplam sure
  artir(kendi, yigin[yigin.length - 1]);              // yalnizca en icteki icin kendi suresi
}

console.log("islev".padEnd(16) + "toplam".padStart(8) + "kendi".padStart(8));
for (const [ad, t] of [...toplam].sort((a, b) => b[1] - a[1]))
  console.log(ad.padEnd(16) + `${t} ms`.padStart(8) + `${kendi.get(ad) ?? 0} ms`.padStart(8));

// Uzun gorev esigi ve kare butcesi
const UZUN_GOREV = 50;      // ms
const KARE_BUTCESI = 1000 / 60;

const gorevler = [
  { ad: "gezinme isleme", sure: 132 },
  { ad: "olcum listesi cizimi", sure: 68 },
  { ad: "girdi isleyicisi", sure: 12 },
  { ad: "kaydirma isleyicisi", sure: 23 },
];

console.log("\ngorev".padEnd(24) + "sure".padStart(8) + "  uzun gorev?  kacan kare");
for (const g of gorevler) {
  const kacan = Math.max(0, Math.floor(g.sure / KARE_BUTCESI));
  console.log(
    g.ad.padEnd(24) + `${g.sure} ms`.padStart(8) +
    (g.sure > UZUN_GOREV ? "  evet" : "  hayir").padEnd(15) + kacan);
}
console.log(`\nkare butcesi: ${KARE_BUTCESI.toFixed(2)} ms (saniyede 60 kare)`);

islev             toplam   kendi
kok                10 ms    0 ms
olcumleriCiz        9 ms    1 ms
satirKur            6 ms    3 ms
tarihBicimle        3 ms    3 ms
esikHesapla         2 ms    2 ms
kutugeYaz           1 ms    1 ms

gorev                      sure  uzun gorev?  kacan kare
gezinme isleme            132 ms  evet         7
olcum listesi cizimi       68 ms  evet         4
girdi isleyicisi           12 ms  hayir        0
kaydirma isleyicisi        23 ms  hayir        1

kare butcesi: 16.67 ms (saniyede 60 kare)

Toplam süre, bir işlevin ve onun çağırdığı her şeyin süresidir. Kendi süresi, yalnızca o işlevin gövdesinde geçen süredir. Kök çerçevenin toplam süresi kaydın tamamıdır ve kendi süresi sıfırdır: hiçbir iş yapmaz, yalnızca çağırır.

Eniyileme kararı kendi süresine bakılarak verilir. Toplam süresi büyük bir işlevi hızlandırmaya çalışmak, zaman aslında onun çağırdığı bir alt işlevde geçiyorsa boşa emektir. Çıktıda olcumleriCiz toplamda dokuz milisaniye tutar ama kendi gövdesinde yalnızca bir milisaniye harcar; asıl yük satirKur ve onun çağırdığı biçimleme işlevindedir.

Uzun Görev ve Kare Bütçesi

İkinci tablo iki eşiği yan yana koyar.

Uzun görev eşiği, ana iş parçacığını elli milisaniyeden uzun süre meşgul eden görevleri ayırır. Eşiğin gerekçesi girdi yanıtıdır: kullanıcı bir düğmeye bastığında yanıtın bu mertebede gecikmesi fark edilir hâle gelir.

Kare bütçesi, ekranın yenileme hızından türetilir. Örnekteki hesap saniyede altmış kare varsayımıyla yapılmıştır ve bütçeyi yaklaşık on yedi milisaniyeye indirir; farklı yenileme hızına sahip bir ekranda bütçe değişir, hesabın biçimi değişmez. Bütçeye sığmayan her görev, süresi boyunca kare üretilmesini engeller — son sütun bunu sayar.

İki eşik farklı sorunları ölçer. Elli milisaniyelik bir görev uzun görev sayılmaz ama üç kareyi düşürür. Kaydırma ve animasyon akıcılığı kare bütçesiyle, tıklama yanıtı uzun görev eşiğiyle değerlendirilir.

Düzen Sarsıntısı

Kayıtta en sık karşılaşılan örüntü, betiğin içine serpilmiş yerleşim hesaplarıdır. Nedeni tanımlıdır: bir ölçü sorulduğunda tarayıcı, bekleyen değişiklikler varsa yerleşimi hemen hesaplamak zorundadır. Ölçü okuma ile biçem yazma sırayla tekrarlandığında bu hesap her turda yeniden zorlanır.

// duzen-sarsintisi.mjs — okuma ile yazmanin siralanmasi kac yerlesim hesabi uretir
function motor() {
  let kirli = false;
  let zorlananHesap = 0;
  return {
    get zorlananHesap() { return zorlananHesap; },
    yaz() { kirli = true; },                       // yerlesimi gecersiz kilar
    oku() { if (kirli) { zorlananHesap += 1; kirli = false; } }, // olcu istemek hesabi zorlar
    kareSonu() { if (kirli) { kirli = false; return 1; } return 0; }, // normal hesap
  };
}

function calistir(sira) {
  const m = motor();
  for (const islem of sira) m[islem]();
  const kareSonuHesabi = m.kareSonu();
  return { zorlanan: m.zorlananHesap, kareSonu: kareSonuHesabi };
}

const SATIR = 5;
const dongude = [];
for (let i = 0; i < SATIR; i++) dongude.push("oku", "yaz"); // her satir icin oku sonra yaz

const ayrilmis = [
  ...Array.from({ length: SATIR }, () => "oku"),
  ...Array.from({ length: SATIR }, () => "yaz"),
];

for (const [ad, sira] of [["dongu icinde oku-yaz", dongude], ["once tum okumalar", ayrilmis]]) {
  const s = calistir(sira);
  console.log(
    `${ad.padEnd(22)} zorlanan yerlesim hesabi: ${s.zorlanan}` +
    `   kare sonundaki hesap: ${s.kareSonu}`);
}

dongu icinde oku-yaz   zorlanan yerlesim hesabi: 4   kare sonundaki hesap: 1
once tum okumalar      zorlanan yerlesim hesabi: 0   kare sonundaki hesap: 1

İki sıralama aynı işi yapar ve aynı sonucu üretir; farkları tetikledikleri hesap sayısıdır. Döngü içinde okuyup yazan sıra, ilk okuma dışında her okumada yerleşimi zorlar. Okumaları öne alan sıra hiç zorlamaz; tek hesap, karenin sonunda tarayıcının kendi zamanlamasıyla yapılır.

Kayıtta bu örüntü, betik görevinin içine yerleşmiş yerleşim işleri olarak görünür ve araçlar bunu ayrıca uyarı olarak işaretler. Düzeltmenin biçimi her zaman aynıdır: okumaları topla, sonra yazmaları topla. Beş satırlık bir listede fark önemsizdir; yüz satırlık bir ölçüm tablosunda kare bütçesinin tamamını yer.

Kendi Kodunu İşaretlemek

Örnekleme, kısa süren ve seyrek çalışan kodu güvenilir biçimde yakalamaz. Bir işlevin kayıtta hiç görünmemesi, hiç çalışmadığı anlamına gelmez; iki örnek arasına sığmış olabilir.

Bunun karşılığı, kodun kendi sınırlarını bildirmesidir. Bir noktaya im konur, iki im arasındaki aralık bir ölçüm olarak adlandırılır ve bu adlandırılmış aralıklar kayıtta kendi izlerinde görünür. Eşzamansız JavaScript ve Çalışma Zamanı kursundaki Başarım Profilleme dersinde tanımlanan bu ikili, kayıttaki isimsiz görevleri anlamlı adlara bağlar.

İmlerin bir yararı da eşzamansız sınırları taşımasıdır: veri isteğinin başladığı an ile listenin çizildiği an arasındaki aralık, tek bir görev içinde geçmediği için alev grafiğinden okunamaz; adlandırılmış bir aralık olarak konursa okunur.

Kaydın Yorumlanmasındaki Tuzaklar

Üç tuzak sık görülür.

Örnekleme kesin değildir. Küçük sayılar örnek aralığından etkilenir; iki milisaniyelik bir fark gürültü olabilir. Karar verilecek büyüklükler örnek aralığının belirgin katları olmalıdır.

Ölçmek etkiler. Kayıt açıkken sayfa daha yavaş çalışır. Mutlak süreler değil, aynı koşulda alınmış iki kayıt arasındaki oran anlamlıdır.

Geliştirme çıktısı üretim çıktısı değildir. Küçültülmemiş, ek denetimler taşıyan bir çıktının kaydı, kullanıcının karşılaştığı davranışı temsil etmez. Ölçüm üretim yapılandırmasıyla yapılır; işlev adlarının okunabilirliği ayrı bir konudur ve kaynak haritalarıyla çözülür.

Özet

• Başarım kaydı birkaç izi aynı zaman ekseninde toplar; asıl değeri izler arasındaki boşlukların görünür olmasıdır.
• Ana iş parçacığı tek bir sıradır: ayrıştırma, biçem, yerleşim, boyama ve bütün betikler onu paylaşır.
• Alev grafiğinde genişlik süre, derinlik çağrı iç içeliğidir; eniyileme kararı toplam süreye değil kendi süresine bakılarak verilir.
• Uzun görev eşiği girdi yanıtını, kare bütçesi akıcılığı ölçer; ikisi farklı sorunlara işaret eder.
• Ölçü okuma ile biçem yazmanın sıralanması yerleşim hesabını zorlar; okumaları öne almak zorlanan hesabı sıfıra indirir.
• Örnekleme kısa kodu kaçırır, kayıt ölçtüğünü yavaşlatır ve geliştirme çıktısı üretim davranışını temsil etmez.

Sonraki Adım

Başarım kaydı bir anın dökümünü verir: kaydın açık olduğu birkaç saniyede ne olduğunu. Bazı sorunlar bu pencereye sığmaz. Ölçüm sayfası açık kaldıkça yavaşlıyor, listeyi her yenileyişte biraz daha ağırlaşıyorsa, tek bir kayıtta görülecek bir uzun görev yoktur; biriken şey zamanla artan ve serbest bırakılmayan bellektir. Bunun ölçüsü süre değil, programın hâlâ erişebildiği nesnelerin toplamıdır. Sonraki ders bu toplamı ölçen aracı ve sızıntının nasıl bulunacağını ele alır.