Özet - Performans
- JavaScript kursu
- Uzman
- Ders 12/63
- 5 dk
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.
Başlangıç kodu
// Arama girişi için debounce'lu ve önbellekli arama oluştur
// fetchFn ve delay parametreleri; Map ile önbellek, zamanlayıcı ile gecikmeÖ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.
Başlangıç kodu
// Throttle'lı scroll dinleyicisi kur ve temizleme fonksiyonu döndür
// handler ve interval parametreleri; lastRun ile sınırla, cleanup ile kaldırÖ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);
};
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Önbellekten oku
const memo = new Map();
const run = (q) => {
if (memo.has(q)) return ____;
const result = fetchFn(q);
memo.set(q, result);
return result;
};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;
};Açıklama: Hit durumunda memo.get(q) ile önbellekten döndürdün.
2 Aracı senaryoyla eşleştir
| Kavram | Anlamı |
|---|---|
memoization |
pahalı hesap |
debounce |
arama kutusu |
throttle |
scroll olayı |
cleanup |
dinleyici kaldırma |