Web Programlama Eğitimi: Event Timing ile INP Kök Neden Analizi

Web programlama eğitimi için INP verisini doğru toplamak

INP tek bir JavaScript fonksiyonu süresi değildir. Bir etkileşimde input delay, event handler processing ve tarayıcının sonraki frame'i ekrana sunmasına kadar geçen presentation delay birleşir. Bu ayrımı gerçek kullanıcı verisinde görmek için Event Timing API ile yalnızca 40 ms ve üstü etkileşimleri toplayın. Tarayıcı event sürelerini 8 ms çözünürlüğe yuvarlayabilir; bu nedenle 17 ms ile 23 ms arasındaki farkı kesin bir regresyon gibi yorumlamayın. Telemetriye DOM metni, input değeri veya tam URL yerine event type, duration, interactionId ve kontrollü bir target kimliği gönderin.

function targetId(node) {
  if (!(node instanceof Element)) return 'unknown';
  return node.closest('[data-perf-id]')?.dataset.perfId ?? 'unlabeled';
}

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.interactionId === 0 || entry.duration < 40) continue;

    navigator.sendBeacon('/rum/event-timing', JSON.stringify({
      type: entry.name,
      duration: Math.round(entry.duration),
      interactionId: entry.interactionId,
      startTime: Math.round(entry.startTime),
      target: targetId(entry.target)
    }));
  }
});

observer.observe({
  type: 'event',
  buffered: true,
  durationThreshold: 40
});

Observer'ı uygulama boot edildiğinde kurun; route component'i mount olduğunda kurmak, route'a gelmeden önceki ilk etkileşimleri kaçırır. `buffered: true`, observer kurulmadan oluşmuş ve tarayıcının buffer'ında bulunan entry'leri de verir. Scroll ve continuous gesture'lar Event Timing'in temsil ettiği discrete interaction modeliyle aynı değildir. Bu nedenle `pointerdown`, `click`, `keydown` ve `input` dağılımlarını ayrı boyutlar olarak saklayın; hepsini tek bir ortalamada birleştirmek, örneğin yalnızca autocomplete input'larında görülen sorunu gizler.

JavaScript eğitimi perspektifiyle trace ve long task eşleştirme

Yüksek RUM örneğini yeniden üretirken Chrome DevTools Performance panelinde `Web Vitals`, `Screenshots` ve `Event log` izlerini açın. Sorunlu düğmeye tıklayın, kaydı durdurun ve Event Log'daki `click` girişinden Main track'e inin. Event handler altındaki sarı JavaScript bloğu processing maliyetidir; handler bittikten sonra gelen `Recalculate Style`, `Layout`, `Paint` ve uzun task zinciri presentation delay'i açıklar. Aynı akışı CPU throttling olmadan ve sabit bir throttling profiliyle ayrı kaydedin. Bu iki koşulu karıştırmak, cihaz yavaşlığını kod regresyonu sanmaya yol açar.

RUM'daki etkileşim başlangıcıyla long task'leri istemci tarafında da ilişkilendirebilirsiniz. Aşağıdaki kod, event başlangıcından sonraki 500 ms pencerede başlayan 50 ms üstü task'leri işaretler. Bu doğrudan nedensellik kanıtı değildir: task interaction'dan sonra başlayıp başka bir timer'a ait olabilir. Ancak Performance trace'te incelenecek adayları daraltır.

const longTasks = [];
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    longTasks.push({ start: entry.startTime, duration: entry.duration });
  }
}).observe({ type: 'longtask', buffered: true });

function longTasksAfter(interactionStart) {
  return longTasks.filter((task) =>
    task.start >= interactionStart &&
    task.start < interactionStart + 500
  );
}

Önce-sonra karşılaştırmasını p50 ile değil, aynı route ve aynı event type için p75 ve p95 ile yapın. Örneğin `checkout-submit` için deploy öncesi p75 event duration 184 ms, değişiklik sonrası 62 ms ise, aynı sürüm aralığında request hacmi ve cihaz sınıfını da kontrol edin. Chrome Performance trace'inde 90 ms'lik `JSON.parse` veya 140 ms'lik synchronous schema validation görüyorsanız, yalnızca INP skorunu değil bu fonksiyonun self time'ını da değişiklik kabul kriterine ekleyin.

Frontend development eğitimi: presentation delay'i küçülten handler tasarımı

Sık yapılan hata, click handler içinde görünür geri bildirim verilmeden büyük DOM güncellemesini başlatmaktır. Tarayıcı, JavaScript task'i bitmeden paint yapamaz. İlk frame'de butonu pending durumuna alın, pahalı render veya serializasyon işini sonraki task'e bırakın. İki `requestAnimationFrame` çağrısı rastgele bir gecikme hilesi değildir: ilk callback style/layout hazırlığına, ikincisi pending durumunun paint edilmesinden sonraki çalışmaya fırsat verir. Bu teknik yalnızca kullanıcıya hemen gösterilecek durum gerçekten bağımsızsa kullanılmalıdır.

saveButton.addEventListener('click', () => {
  saveButton.disabled = true;
  saveButton.classList.add('is-pending');

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      const payload = buildLargePayload(formState);
      void submit(payload).finally(() => {
        saveButton.disabled = false;
        saveButton.classList.remove('is-pending');
      });
    });
  });
});

Bu değişiklikten önce ve sonra aynı click için trace alın. Beklenen sonuç handler processing süresinin tamamen sıfırlanması değil, pending sınıfının eklenmesinden sonraki ilk Paint'in pahalı `buildLargePayload` önüne geçmesidir. Performance panelinde `Screenshots` şeridinde pending görünümünün daha erken geldiğini doğrulayın. `Promise.resolve().then(...)` ile ertelemek aynı sonucu vermez; microtask kuyruğu mevcut task tamamlanmadan boşaltılır ve paint yine gecikebilir.

Bir başka ince nokta, bir handler içinde DOM yazdıktan sonra `offsetWidth`, `getBoundingClientRect()` veya `getComputedStyle()` okumaktır. Bu okuma tarayıcıyı bekleyen style ve layout hesabını senkron tamamlamaya zorlayabilir. Chrome trace'te handler altında `Layout` görürseniz okumaları yazılardan önce yapın veya yalnızca bir sonraki frame'de ölçün. DevTools Performance panelindeki `Forced reflow` uyarısını, sadece toplam task süresinden daha güçlü bir işaret olarak kullanın.

Frontend framework karşılaştırması: React, Angular, Vue ve AngularJS

Bir frontend framework karşılaştırması yapılırken yalnızca bundle boyutu veya benchmark tablosu INP kök nedenini vermez; aynı interaction'ın hangi state güncellemelerini senkron render'a soktuğunu trace edin. reactjs eğitimi içinde React DevTools Profiler ile click commit'ini kaydedin. Acil input değerini senkron güncelleyip pahalı sonuç listesini transition'a almak, React'in düşük öncelikli işi bölmesine izin verir. Ancak `startTransition` içindeki hesaplama saf JavaScript olarak 200 ms sürüyorsa task yine bloklanabilir; Profiler'da component render süresine ek olarak Chrome Main track'i kontrol edin.

function SearchBox({ filter }) {
  const [query, setQuery] = React.useState('');
  const [filterQuery, setFilterQuery] = React.useState('');
  const [isPending, startTransition] = React.useTransition();

  function onChange(event) {
    const next = event.target.value;
    setQuery(next);
    startTransition(() => setFilterQuery(next));
  }

  return <>
    <input value={query} onChange={onChange} />
    {isPending && <span aria-live="polite">Filtering</span>}
    <ResultList query={filterQuery} filter={filter} />
  </>;
}

angular eğitimi tarafında sık rastlanan maliyet, üçüncü taraf callback'in her mesajında tüm change detection ağacını çalıştırmaktır. Yüksek frekanslı kaynağı `NgZone.runOutsideAngular()` içinde biriktirip frame başına tek state güncellemesi yapın; OnPush component'te `markForCheck()` ile kontrol kapsamını belirgin hale getirin. angularjs eğitimi için karşılığı `$rootScope.$apply()` yerine `$applyAsync()` kullanmaktır: `$apply()` her çağrıda digest başlatabilir, `$applyAsync()` aynı turdaki güncellemeleri bir digest'e toplar. AngularJS uygulamasında watcher sayısını Batarang gibi eski bir araçla değil, DevTools trace ve digest sayaçlarıyla izlemek daha güvenilir bir pratik olur.

vuejs eğitimi kapsamında büyük ve derin reaktif koleksiyonları input handler'ında yeniden üretmeyin. `shallowRef` ile liste referansını izleyip satırları `v-memo` veya uygun anahtarlı component'lere bölmek, her tuşta binlerce proxy erişimi ve patch üretimini azaltabilir. Vue Devtools timeline'da component update sayısını, React DevTools'ta commit süresini, Angular DevTools'ta change detection süresini aynı event senaryosunda ölçün. react native eğitimi için bu browser Event Timing ölçümü doğrudan taşınmaz; native UI thread ve JS thread ilişkisini React DevTools Profiler ile Android Studio System Trace veya Xcode Instruments üzerinde ayrı incelemek gerekir.

INP regresyonunu yayın hattında engellemek

Sentetik test, gerçek kullanıcı INP'sinin yerine geçmez; ancak pahalı bir click akışının regresyonunu PR aşamasında yakalayabilir. Playwright ile kritik akışı çalıştırın, Chrome trace'i `context.tracing` ile artifact olarak saklayın ve RUM dashboard'unda route-event boyutında p75 alarmı tanımlayın. Alarm eşiğini global site metriği yerine örneğin `product-filter/input` için son 14 gün p75 değerinin yüzde 20 üstü olarak kurmak, başka route'lardaki trafik değişiminden kaynaklanan gürültüyü azaltır.

import { test, expect } from '@playwright/test';

test('filter interaction keeps visual feedback responsive', async ({ page }) => {
  await page.context().tracing.start({ screenshots: true, snapshots: true });
  await page.goto('/products');
  await page.getByLabel('Search products').fill('keyboard');
  await expect(page.getByTestId('result-count')).not.toHaveText('0');
  await page.context().tracing.stop({ path: 'artifacts/filter.zip' });
});

Bu test tek başına milisaniye eşiği iddia etmez, çünkü CI makinesi oynaktır. Bunun yerine trace artifact'ini regresyonda inceleyin ve RUM doğrulamasını zorunlu ikinci aşama yapın. JavaScript eğitimi veya web programlama eğitimi materyalinde ekip standardı olarak şunu yazın: yeni bir interaction eklendiğinde `data-perf-id` atanacak, event type bazında dashboard oluşturulacak ve yüksek p75 örneği Chrome Performance trace'iyle açıklanmadan optimizasyon PR'ı kapatılmayacak. Bu sözleşme, ölçülemeyen 'arayüz yavaşladı' raporunu tekrar üretilebilir bir incelemeye dönüştürür.

Sık Sorulan Sorular

Web programlama eğitimi kapsamında INP ile Event Timing API nasıl ölçülür?

Uygulama başlangıcında `PerformanceObserver` kurup `type: 'event'`, `buffered: true` ve en az 40 ms `durationThreshold` kullanın. Backend'e event adı, duration, interactionId ve PII içermeyen `data-perf-id` gönderin. Sonuçları route ve event type bazında p75 olarak karşılaştırın.

Reactjs eğitimi için startTransition INP sorununu tek başına çözer mi?

Hayır. `startTransition`, React state güncellemesine düşük öncelik verir ve render'ın bölünebilmesini sağlar; 150 ms süren senkron JSON dönüştürme, büyük sort veya DOM ölçümü yine Main thread'i bloke eder. React DevTools Profiler'daki commit'i Chrome Performance Main track'indeki JavaScript task'iyle birlikte inceleyin.

Angular eğitimi ve Vuejs eğitimi projelerinde INP karşılaştırması nasıl yapılır?

Aynı cihaz profili, aynı veri hacmi ve aynı input akışıyla Chrome Performance kaydı alın. Angular'da change detection süresini Angular DevTools ile, Vue'da component update sayısını Vue Devtools timeline ile ölçün. Ardından RUM'da aynı route ve event type için p75 Event Timing duration değerini deploy öncesi ve sonrası karşılaştırın.

Frontend framework karşılaştırması yaparken React Native eğitimi neden ayrı ele alınmalı?

Event Timing API browser kullanıcı etkileşim entry'leri üretir; React Native uygulamasının native UI thread davranışını temsil etmez. Web için Chrome Performance ve Event Timing, React Native için React DevTools Profiler ile Android Studio System Trace veya Xcode Instruments kullanın; iki platformun ms değerlerini aynı metrikmiş gibi birleştirmeyin.