Özet - Performans

JavaScript kursu · Uzman · Ders 12/63

Memoization, debounce ve throttle kullanarak bir arama girişi uygulaması yazarsın.

Özet - Performans

Bu grupta dört temel performans aracı öğrendin: performance.now ile ölçüm, memoization ile önbellekleme, debounce ile geciktirme ve throttle ile sınırlama.

Bellek sızıntılarını önlemek için zamanlayıcı ve dinleyicileri temiz tutmayı da gördün. Şimdi bunları bir arama girişinde birleştirip sağlam bir uygulama parçası kuracaksın.

Uygulama Önbellekli ve debounce'lu arama

createSearch adında bir fonksiyon yaz. fetchFn ve delay parametrelerini alıp önbellekli ve debounce'lu bir arama sarmalayıcısı döndürsün. Map ile önbellek, setTimeout ile gecikme kullansın.

Örnek çözümü göster

memo = new Map(); run içinde has/get/set; sarmalayıcı clearTimeout sonra setTimeout.

Örnek çözüm:
function createSearch(fetchFn, delay) {
  const memo = new Map();
  const run = (q) => {
    if (memo.has(q)) return memo.get(q);
    const result = fetchFn(q);
    memo.set(q, result);
    return result;
  };
  let timer = null;
  return function(query) {
    clearTimeout(timer);
    timer = setTimeout(() => run(query), delay);
  };
}

Uygulama Throttle'lı scroll dinleyicisi

setupScroll adında bir fonksiyon yaz. handler ve interval parametrelerini alıp throttle'lı bir scroll dinleyicisi kurup cleanup adında bir temizleme fonksiyonu döndürsün. Date.now() ile zamanı takip etsin.

Örnek çözümü göster

onScroll içinde Date.now() ve now - lastRun >= interval; addEventListener("scroll") ve return function cleanup() ile removeEventListener.

Örnek çözüm:
function setupScroll(handler, interval) {
  let lastRun = 0;
  const onScroll = () => {
    const now = Date.now();
    if (now - lastRun >= interval) {
      lastRun = now;
      handler(now);
    }
  };
  window.addEventListener("scroll", onScroll);
  return function cleanup() {
    window.removeEventListener("scroll", onScroll);
  };
}

Kendini test et

Önbellekten oku

const memo = new Map();
const run = (q) => {
  if (memo.has(q)) return ____;
  const result = fetchFn(q);
  memo.set(q, result);
  return result;
};

Cevabı göster

const memo = new Map();
const run = (q) => {
  if (memo.has(q)) return memo.get(q);
  const result = fetchFn(q);
  memo.set(q, result);
  return result;
};

Aracı senaryoyla eşleştir

memoization

pahalı hesap
debounce

arama kutusu
throttle

scroll olayı
cleanup

dinleyici kaldırma

Uzman bölümündeki tüm dersler

Özet - Performans