Bileşen Bazlı Render Bütçeleme: React/Angular/Vue için Gerçekçi Rehber

Neden render bütçesi ve nasıl ölçülür - gerçek profil adımları

Render bütçesi -her bir frame veya kullanıcı etkileşimi için ayrılan CPU süresi- belirlemek performans iyileştirmelerini ölçülebilir hale getirir. Somut adım: Chrome DevTools Performance panelinde 'Screenshots' ve 'Capture Settings'te 'JavaScript CPU profile' açık şekilde 10 saniyelik senaryo kaydı alın; ardından trace'i dışa aktarın ve 'Scripting' sürelerini toplayın. Araç: Chrome DevTools (Performance), Lighthouse (npx lighthouse), WebPageTest API. Örnek komut:

npx lighthouse https://staging.example.com --output=json --output-path=./before.json --preset=desktop

Gerçek zamanlı ölçüm için PerformanceObserver kullanın: longtask kaydederek hangi işlevlerin bütçeyi tükettiğini görebilirsiniz. Bu kodu uygulama girişine ekleyin ve staging ortamında çalıştırın:

if ('PerformanceObserver' in window) {
  const obs = new PerformanceObserver(list => {
    for (const entry of list.getEntries()) {
      if (entry.duration > 50) console.log('LongTask', entry.name, entry.duration, entry);
    }
  });
  obs.observe({type: 'longtask', buffered: true});
}

Bu çıktıyı deploy sonrası kayıt altına alıp, değişiklik sonrası aynı script ile tekrar karşılaştırın.

React: Profiler ile gerçekçi maliyet hesaplama, memo/useCallback hataları

React uygulamalarında maliyetin çoğu reconciliation ve commit aşamalarında ortaya çıkar; bu nedenle React Profiler kullanarak komponent bazlı actualDuration ve baseDuration ölçün. Uygulamada değişiklik öncesi-profiler kullanımı için sample:

import React, { Profiler } from 'react';

function onRenderCallback(id, phase, actualDuration, baseDuration) {
  // staging loglama: gönderimi merkezi telemetriye yapın
  console.log(id, phase, actualDuration, baseDuration);
}

function App() {
  return (
    
      
    
  );
}

Profiling sonucu actualDuration toplamını test senaryosu başına toplayıp not alın; optimizasyon (ör. React.memo, useMemo, useCallback) sonrası aynı Profiler ile yeniden ölçün ve delta'yı hesaplayın.

Çok sık yapılan hata: fonksiyon veya obje proplarını inline vermek React.memo'yu bozar çünkü shallow compare değişir. Somut düzeltme örneği:

// Kötü: her renderda yeni fonksiyon


// İyi: useCallback ile stabil referans
const handleClick = useCallback(() => doSomething(id), [id]);


// Obje prop: useMemo ile stabilize edin
const options = useMemo(() => ({ selected: id }), [id]);

Neden: React.memo shallow compare yapar; inline değer referans değiştirir ve yeniden render tetikler - bu mekanizmayı bilerek referans stabilitesi sağlayın.

Angular: OnPush, ngZone.runOutsideAngular ve değişiklik tespiti bütçesi

Angular'da varsayılan değişiklik tespiti (Zone.js aracılığıyla) tüm component ağacını tetikleyebilir; büyük uygulamalarda bu, frame başına yüksek CPU maliyeti üretir. Somut adım: Angular DevTools ile component change detection sürelerini ölçün ve 'Change Detection' etkileşimlerini kaydedin. Örnek OnPush kullanımı:

@Component({
  selector: 'item-list',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `...`
})
export class ItemListComponent {
  @Input() items: ReadonlyArray;
}

Bu yaklaşım immutable veriyi gerektirir; veriyi güncellemek için yeni dizi atayın: this.items = [...this.items, newItem].

Zorlanılan durumlar için ngZone.runOutsideAngular ile sık IO veya zamanlayıcı işlemlerini zone dışına alın, sonra gerektiğinde markForCheck ile güncelleme yapın. Örnek:

constructor(private ngZone: NgZone, private cd: ChangeDetectorRef) {}

ngOnInit() {
  this.ngZone.runOutsideAngular(() => {
    const id = setInterval(() => {
      // sık işlem, zone'u kirletmesin
    }, 1000);
  });
}

// bir olay sonrası güncelleme
this.ngZone.run(() => this.cd.markForCheck());

Profiling sonrası before/after mantığı: Angular DevTools'tan 'CD' sürelerini toplayın ve OnPush + runOutsideAngular sonrası toplam süreyi karşılaştırın.

Vue: reactivity kökenli yeniden hesaplar, computed caching ve v-once uygulamaları

Vue'da re-renderlar reactive dependency graph üzerinden tetiklenir; büyük template'lerde gereksiz reactive erişimler performansı bozar. Ölçüm aracı olarak Vue Devtools ve Chrome Performance birlikte kullanın; ayrıca PerformanceObserver ile Vue uygulamasında uzun görevleri kayıt altına alın. Somut düzeltme: computed ile ağır hesapları cache'leyin ve v-once ile statik içeriği tek sefer render edin. Örnek:

export default {
  props: { items: Array },
  computed: {
    sorted() {
      // ağır işlem
      return this.items.slice().sort((a,b) => a.val - b.val);
    }
  },
  // statik parçalar
  template: `
    
{{ item.name }}
    
Statik footer
  `
}

Edge case: computed'in içine side-effect koymayın; computed sadece hesap olmalı, aksi halde cache'in bozulmasına yol açar.

Vue 3'te reactivity ref vs reactive farkı referans değişimleri ve shallow reactive davranışı etkiler; büyük nested objelerde shallowRef kullanarak yeniden tetiklemeyi kontrol edebilirsiniz. Somut adım: staging'de Vue Devtools snapshot'unu alın, optimizasyon sonrası tekrar alın ve component render sayısını karşılaştırın.

Operasyonel plan: before-after karşılaştırma, telemetri ve otomasyon

Her optimizasyon için repeatable test senaryosu oluşturun: aynı kullanıcı akışını Puppeteer/Playwright ile senkronize olarak çalıştırıp Lighthouse raporları üretin. Örnek Playwright-Lighthouse betiği:

// örnek akış: record önce sonra
npx playwright test --project=chromium
npx lighthouse http://localhost:3000/flow --output=json --output-path=./after.json

Sonra Node ile basit karşılaştırma yapın:

// compare.js
const before = require('./before.json');
const after = require('./after.json');
console.log('perf delta', after.categories.performance.score - before.categories.performance.score);
// scripting time extract
const beforeScript = before.audits.metrics.details.items[0].observedDomSize || 0;
const afterScript = after.audits.metrics.details.items[0].observedDomSize || 0;
console.log('observedDomSize delta', afterScript - beforeScript);

Karşılaştırma mantığı: hem Lighthouse skor değişimini hem trace içindeki 'Scripting' zamanını (trace.events filtreleyerek) hem de framework seviyesindeki Profiler/DevTools metriklerini birlikte raporlayın.

Neden bu yaklaşım? Tek bir araç tek başına yanıltıcı olabilir; örneğin React Profiler render sürelerini verir ama gerçek kullanıcı CPU etkisini Chrome trace üzerindeki Scripting zamanıyla korele etmeden optimizasyonun maliyetini bilemezsiniz. Somut kural: önce Profiling ile hot-path'i bulun, sonra micro-optimization (memo, OnPush vs) uygulayın, ardından end-to-end Lighthouse/trace ölçümüyle doğrulayın.

Sık Sorulan Sorular

reactjs eğitimi sırasında gerçek uygulamada render maliyetini nasıl ölçerim?

React için en pratik yol: React Profiler ile component bazlı actualDuration toplayıp, aynı senaryoyu Chrome DevTools Performance trace ile kaydetmektir. Adımlar: 1) Profiler onRender callback'lerini staging telemetriye gönderin, 2) DevTools Performance'ta 'Capture' ile trace alın, 3) npx lighthouse ile Lighthouse raporu oluşturun. Bu üç kaynağı karşılaştırarak hem framework içi maliyeti hem de gerçek kullanıcı CPU yükünü hesaplayabilirsiniz.

angular eğitimi kapsamında OnPush kullanmak hangi durumlarda işe yaramaz?

OnPush yalnızca referans değişimine dayalı optimizasyon sağlar; mutable state kullanıyorsanız veya parent component sürekli yeni referanslı prop veriyorsa OnPush etkisiz kalır. Somut uyarı: inline obje/fonksiyon propları, Observables ile yanlış kullanım veya for döngüsünde index ile keyleme gibi durumlar OnPush performans kazancını yok eder. Çözüm: immutable pattern, use of async pipe ve use of trackBy ile birlikte OnPush uygulayın.

vuejs eğitimi esnasında computed neden beklenenden fazla çalışıyor olabilir?

Computed property cache'i, bağımlılıklarından biri değiştiğinde invalid olur; eğer computed içinde reactive olmayan yan etkiler veya her renderda değişen bir referans (ör. Date.now(), inline fonksiyon ile oluşturulan obje) kullanıyorsanız cache her renderda düşer. Kontrol için Vue Devtools'ta computed re-evaluation sayısını izleyin ve gerekirse useMemo tarzı tekniklerle veya shallowRef ile bağımlılıkları küçültün.

frontend framework karşılaştırması yaparken hangi metrikleri zorunlu kıstas almalıyım?

Sadece bundle veya startup süresi değil, aşağıdakileri karşılaştırın: 1) component-level render süreleri (Profiler/DevTools), 2) total scripting time (Chrome trace), 3) longtask sayısı (PerformanceObserver), 4) gerçek kullanıcı gecikmesi (Lighthouse INP/TTI/LCP). Ayrıca framework spesifik telemetri (React Profiler, Angular DevTools, Vue Devtools) ile korelasyon yapın.

web programlama eğitimi içinde frontend development eğitimi ve javascript eğitimi nasıl entegre edilmelidir?

Pratik odaklı entegre bir yol: değişiklik tespiti, reactivity ve reconciliation mekanizmalarını önce teorik kısımda anlatın; ardından gerçek örnekler üzerinde profiler kullanımı, before/after Lighthouse senaryoları ve telemetri toplama uygulayın. Örnek ders akışı: 1) React Profiler + Lighthouse laboratuvarı, 2) Angular OnPush + ngZone laboratuvarı, 3) Vue computed/v-once vakaları. Böylece frontend development eğitimi ile javascript eğitimi birbirini tamamlar.