Performance

Daraja:

Senior darajadagi JavaScript mavzulari: xotira boshqaruvi, garbage collection, closure leak va og'ir hisob-kitoblarni Web Worker'ga ajratish.

Memory management — GC, closure leak, WeakMap/WeakSet

Senior

Nima bu?

JavaScript avtomatik **Garbage Collection (GC)** bilan ishlaydi — erishilmaydigan ob'ektlar xotiradan tozalanadi. Mark-and-sweep algoritmi eng keng tarqalgan. Closure DOM element yoki katta ob'ektga reference saqlab qolsa **memory leak** yuz beradi. `WeakMap` va `WeakSet` kalit/ob'ektga zaif reference beradi — boshqa reference qolmasa GC tozalashi mumkin. Angular'da unsubscribe qilmaslik va global listener'lar tipik leak manbalari.

Kod misoli

// Closure leak — DOM element saqlanib qoladi
function attachListener() {
  const button = document.getElementById('submit');
  const hugeData = new Array(1_000_000).fill('data');

  button.addEventListener('click', () => {
    // button va hugeData closure orqali saqlanadi
    console.log(hugeData.length);
  });
  // button DOM dan olib tashlansa ham listener + closure xotirada qolishi mumkin
}

// To'g'ri yondashuv — cleanup
function attachListenerSafe() {
  const button = document.getElementById('submit');
  const handler = () => console.log('clicked');
  button.addEventListener('click', handler);
  return () => button.removeEventListener('click', handler);
}

// WeakMap — ob'ekt kalit, GC tozalashi mumkin
const cache = new WeakMap();

function processUser(user) {
  if (!cache.has(user)) {
    cache.set(user, expensiveCompute(user));
  }
  return cache.get(user);
}

// user ob'ekt boshqa joyda reference qolmasa, cache entry ham tozalanadi

// WeakSet — ob'ekt a'zoligi
const visited = new WeakSet();
function walk(node) {
  if (visited.has(node)) return;
  visited.add(node);
  node.children?.forEach((child) => walk(child));
}

Imtihonda

- JavaScript GC qanday ishlaydi? Memory leak sabablari nima? - `Map` va `WeakMap` farqi nima? Qachon WeakMap tanlanadi?

Yodlash uchun

Leak = keraksiz reference; zaif bog'lanish kerak bo'lsa — WeakMap/WeakSet.
Angular: `takeUntilDestroyed()`, `async` pipe va `ngOnDestroy`'da unsubscribe — leak oldini olishning standart yo'li.

Web Workers — asosiy thread yuklama

Senior

Nima bu?

Web Worker — alohida thread'da JavaScript kodini bajarish imkonini beradi. Asosiy thread (UI thread) bloklanmaydi — animatsiya va foydalanuvchi interaksiyasi silliq qoladi. Worker va main thread `postMessage` / `onmessage` orqali ma'lumot almashadi (structured clone). SharedArrayBuffer va Atomics parallel hisob-kitob uchun mavjud, lekin xavfsizlik cheklovlari bor. Og'ir parse, filter yoki kriptografiya uchun mos.

Kod misoli

// main.js — asosiy thread
const worker = new Worker(new URL('./heavy.worker.js', import.meta.url));

worker.postMessage({
  type: 'FILTER',
  payload: { items: largeArray, minPrice: 100000 },
});

worker.onmessage = (event) => {
  const { type, result } = event.data;
  if (type === 'FILTER_DONE') {
    renderProducts(result); // UI yangilanadi
    worker.terminate(); // ish tugasa yopish mumkin
  }
};

worker.onerror = (err) => {
  console.error('Worker xato:', err.message);
};

// heavy.worker.js — worker thread
self.onmessage = (event) => {
  const { type, payload } = event.data;

  if (type === 'FILTER') {
    const filtered = payload.items.filter(
      (item) => item.price >= payload.minPrice
    );
    self.postMessage({ type: 'FILTER_DONE', result: filtered });
  }
};

// Angular'da (konseptual):
// ng generate web-worker data-processor
// this.worker = new Worker(new URL('./data-processor.worker', import.meta.url));

Imtihonda

- Web Worker nima uchun kerak? Nimalarni worker'da bajarish mumkin, nimalarni yo'q? - Main thread va worker o'rtasida ma'lumot qanday uzatiladi? DOM'ga kirish mumkinmi?

Yodlash uchun

Og'ir CPU ishi → Worker; DOM va UI → faqat main thread.
Angular'da katta CSV parse yoki murakkab filter'ni worker'ga o'tkazish change detection va scroll performance'ni yaxshilaydi.