Web Programlama Eğitimi: ResizeObserver ile Layout Thrashing Avı

Web programlama eğitimi: Layout thrashing belirtilerini olcun

Layout thrashing, JavaScript bir CSS geometrisi yazdiktan sonra ayni is parcaciginda getBoundingClientRect(), offsetWidth veya getComputedStyle() okudugunda gorulur. Tarayici, okunacak degerin dogru olmasi icin bekleyen style ve layout hesaplarini hemen calistirir. Chrome DevTools Performance panelinde kayit baslatip kart panelini 20 kez acip kapatin. Main track icindeki mor Layout bloklarini ve her bloktaki Call Tree kaydini inceleyin. Asagidaki isaretleyici, etkileşimin baslangicini trace icinde ayirt etmeyi saglar:

const panel = document.querySelector('.dashboard-panel');

panel.addEventListener('click', () => {
  performance.mark('panel-toggle-start');
  panel.classList.toggle('is-expanded');
  performance.mark('panel-toggle-end');
  performance.measure(
    'panel-toggle-js',
    'panel-toggle-start',
    'panel-toggle-end'
  );
});

Tek bir iyi kayit yerine tekrarlanabilir bir karsilastirma yapin. Playwright ile ayni viewportta 30 tekrar calistirin, once mevcut ResizeObserver koduyla sonra rAF ile ayrilmis kodla trace alin. Chrome trace dosyalarini DevTools Performance ekranina yukleyip iki kosulda Layout event sayisini, toplam Layout suresini ve Long Task sayisini karsilastirin. p75 hesaplamak icin ham olcumleri JSON olarak saklayin; ortalama, GC veya arka plan islemleri nedeniyle tekil zirveleri gizleyebilir.

npx playwright test resize-benchmark.spec.ts --repeat-each=30
node scripts/summarize-traces.mjs traces/before traces/after

ResizeObserver geri cagrilarinda okuma ve yazmayi ayirin

ResizeObserver callback'i layout hesaplandiktan sonra, paint oncesinde calisir. Callback icinde hedefin genisligini okuyup ayni hedefe genislik, padding veya sinif yazmak yeni bir geometry degisikligi olusturur. Tarayici stabil bir boyuta ulasmak icin observer teslimatini ayni rendering dongusunda yeniden deneyebilir. Sinir asilirsa konsolda ResizeObserver loop completed with undelivered notifications uyarisi gorulebilir. Cozum, callback'te sadece olcumu toplamak; DOM yazisini sonraki requestAnimationFrame turune birakmaktir.

const pending = new Map();
let rafId = 0;

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const width = Math.round(entry.contentRect.width);
    pending.set(entry.target, width);
  }

  if (rafId) return;

  rafId = requestAnimationFrame(() => {
    for (const [element, width] of pending) {
      const columns = width >= 960 ? 4 : width >= 640 ? 2 : 1;
      if (element.dataset.columns !== String(columns)) {
        element.dataset.columns = String(columns);
      }
    }
    pending.clear();
    rafId = 0;
  });
});

observer.observe(document.querySelector('.product-grid'));

Buradaki Math.round ayrintisi gereklidir: zoom, transform veya fractional CSS pixel nedeniyle 639.5 ile 640.0 arasinda gidip gelen degerler, esitlik kontrolu yoksa her teslimatta DOM yazisi uretebilir. Ayrica observer'i kaldirilmayan bileşenlerde mutlaka kapatin. Aksi halde callback referansi, kaldirilmis elementi uygulama seviyesindeki observer uzerinden canli tutabilir.

function observeGrid(grid) {
  observer.observe(grid);
  return () => {
    pending.delete(grid);
    observer.unobserve(grid);
  };
}

const stop = observeGrid(document.querySelector('.product-grid'));
// Bilesen unmount edildiginde:
stop();

CSS containment ile resize etkisini alt agacta tutun

Bir kartin boyutu degistiginde tarayicinin hangi atalari yeniden hesaplayacagi, DOM derinligi ve layout bagimliliklarina baglidir. Bagimsiz urun kartlari veya dashboard widget'lari icin contain: layout paint kullanmak, layout ve paint etkisinin containment sinirinin disina yayilmasini azaltir. Lazy render edilen alanlarda content-visibility: auto gorunmeyen alt agacin render maliyetini erteler. Ancak content-visibility kullanan bir eleman gorunur olmadan once 0 yukseklik raporlayabilir; scroll kararliligi icin contain-intrinsic-size verin.

.dashboard-widget {
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

.product-grid[data-columns='4'] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

Containment ekledikten sonra ekran goruntusu kontrolu tek basina yeterli degildir. DevTools Rendering panelinden Paint flashing acin ve bir widget boyutlanirken sadece beklenen alanin boyandigini dogrulayin. Ardindan Performance panelinde once ve sonra kayitlarini ayni veri setiyle alin. Eğer bir child, parent yuzdesine gore yukseklik hesapliyorsa veya parent auto-size ise contain: size kullanmayin; intrinsic size bildirmeden size containment parent'in beklenmedik bicimde cokmesini saglayabilir. Bu nedenle ornekte size containment yerine layout paint kullaniliyor.

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

Bir frontend framework karşılaştırması yaparken ResizeObserver maliyetini framework adi uzerinden degil, observer sonucunun kac render tetikledigi uzerinden degerlendirin. Bir reactjs eğitimi kapsaminda hook, yalnizca esik asildiginda state guncellemelidir; her pixel degisiminde setState cagrisi React render zincirini calistirir. React Strict Mode gelistirme ortaminda effect'i yeniden kurabildigi icin cleanup eksikligi iki observer kaydi gibi gorunebilir.

import { useEffect, useState } from 'react';

export function useGridColumns(ref) {
  const [columns, setColumns] = useState(1);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const ro = new ResizeObserver(([entry]) => {
      const next = entry.contentRect.width >= 960 ? 4 : 2;
      setColumns((current) => current === next ? current : next);
    });

    ro.observe(element);
    return () => ro.disconnect();
  }, [ref]);

  return columns;
}

Angular eğitimi icin Zone.js etkisini ayirin: yuksek frekansli observer callback'ini NgZone.runOutsideAngular() ile kaydedip sadece breakpoint degistiginde zone icine donmek, tum component tree icin gereksiz change detection calismasini engeller. Vuejs eğitimi tarafinda ref guncellemesini esik tabanli tutun ve onUnmounted ile disconnect edin. Eski uygulamalarda angularjs eğitimi notu olarak $scope.$applyAsync kullanilabilir, fakat callback basina $apply cagrisi digest dongusunu gereksiz tekrarlar. React Native eğitimi icin ise DOM ResizeObserver bulunmadigindan ayni kod tasinamaz; onLayout olayi ve Yoga layout zamanlamasi ayri profillenmelidir. JavaScript eğitimi alan bir ekip icin ortak kural, observer callback'ini olcum siniri olarak gorup framework state guncellemesini deger degisimiyle sinirlamaktir.

Sık Sorulan Sorular

web programlama eğitimi icin ResizeObserver performansi nasil olculur?

Chrome DevTools Performance ile ayni etkileşimi en az 30 kez kaydedin. Before ve after trace'lerinde Main track altindaki Layout event sayisini, toplam Layout suresini ve Long Task sayisini karsilastirin. Playwright --repeat-each=30 ile senaryoyu sabitlemek, elle yapilan testlerdeki viewport ve zamanlama farklarini azaltir.

reactjs eğitimi projelerinde ResizeObserver neden cok render uretir?

Observer her boyut degisiminde callback cagirir. Callback icinde kosulsuz setState kullanmak, deger ayni breakpoint icinde kalsa bile render planlar. Fonksiyonel guncellemede current === next kontrolu yapin ve useEffect cleanup fonksiyonunda ro.disconnect() cagirarak Strict Mode gelistirme davranisinda yinelenen kayitlari onleyin.

angular eğitimi sirasinda ResizeObserver ile change detection nasil sinirlanir?

Observer'i ngZone.runOutsideAngular icinde olusturun. Genişlik 640 veya 960 gibi breakpoint'i gectiginde ngZone.run ile component alanini guncelleyin. Her contentRect degisiminde zone icine girmek, Zone.js tarafindan uygulama genelinde change detection planlanmasina neden olur.

vuejs eğitimi ve angularjs eğitimi projelerinde ayni observer kurali gecerli mi?

Evet. Vue tarafinda onUnmounted ile observer.disconnect() kullanin ve ref degerini sadece breakpoint degistiginde yazin. AngularJS tarafinda callback icinde dogrudan $apply yerine esik degisiminde $applyAsync kullanin. Her iki durumda da piksel seviyesindeki degisimleri framework reaktivitesine tasimamak temel maliyet kontroludur.