Performance va optimizatsiya playbook

"Tez ishlaydigan" ilova — senior belgisi. Lekin avval o'lcha, keyin optimallashtir — taxmin bilan emas. Bu playbook frontend, backend va DB optimizatsiyasini qamraydi (0.1 xotira ierarxiyasi, 13.7 kesh, 6.9 indeks).

1. Oltin qoidalar

1. Avval o'lcha (profile), keyin optimallashtir. "Bu sekin bo'lsa kerak" — taxmin. O'lchamasdan optimallashtirish — vaqt isrofi.
2. Eng katta tor joyni (bottleneck) top. 80% vaqt 20% kodda. O'shani tuzat.
3. Erta optimizatsiya — yovuzlik ildizi. Avval ishlasin, toza bo'lsin; keyin (kerak bo'lsa) tezlashtir.
4. Trade-off bor. Tezlik xotira murakkablik. Har optimizatsiya narx bilan keladi.

2. O'lchash (profiling) — birinchi qadam

// Oddiy vaqt o'lchash
console.time("hisob");
ogirIsh();
console.timeEnd("hisob");   // "hisob: 234ms"

performance.now();          // aniq vaqt (ms, kasrli)

Vositalar:

• Frontend: Chrome DevTools Performance, Lighthouse (Core Web Vitals).
• Backend: node --prof, clinic.js, APM (Sentry, Datadog).
• DB: EXPLAIN ANALYZE (so'rov rejasi).

3. Frontend optimizatsiya

Yuklash tezligi

• Bundle hajmini kamaytir — code splitting, tree shaking, keraksiz kutubxonani olib tashla.
• Lazy loading — kerak bo'lganda yukla (React.lazy, next/dynamic, rasm loading="lazy").
• Rasmlarni optimallashtir — to'g'ri format (WebP/AVIF), o'lcham, next/image.
• CDN — statik fayllar foydalanuvchiga yaqin serverdan.

Render tezligi (React — 11.11)

//  Har render'da yangi obyekt/funksiya  bola qayta render
<Child onClick={() => x} style={{ color: "red" }} />

//  memoizatsiya
const handleClick = useCallback(() => x, [x]);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={handleClick} style={style} />

• React.memo — props o'zgarmasa qayta render qilmaydi.
• Ro'yxat virtualizatsiyasi — minglab elementdan faqat ko'rinadiganini render qil (react-window).
• State'ni pastga tushir — faqat kerakli qism qayta render bo'lsin.

Core Web Vitals

• LCP (eng katta element yuklanishi) < 2.5s.
• CLS (kutilmagan siljish) < 0.1.
• INP (interaktivlik) < 200ms.

4. Backend optimizatsiya

• Asinxron va parallel — mustaqil ishlarni Promise.all bilan birga bajar (ketma-ket emas).

//  ketma-ket (sekin)
const a = await getA(); const b = await getB();
//  parallel
const [a, b] = await Promise.all([getA(), getB()]);

• N+1 so'rovni yo'qot — tsiklda so'rov o'rniga bitta JOIN/eager loading (6-QISM).
• Kesh — qaytariladigan natijani Redis'da saqla (5.21, 13.7).
• Pagination — hammasini emas, sahifalab qaytar.
• Stream — katta javobni bo'lak-bo'lak 5.4-bob.
• Worker — CPU-og'ir ishni asosiy thread'dan ko'chir (worker threads, navbat — 5.22).
• Connection pool — DB ulanishni qayta ishlat (har so'rovda yangi ochma).

5. Ma'lumotlar bazasi optimizatsiya

• Indeks — tez-tez WHERE/JOIN/ORDER BY ishlatiladigan ustunga 6.9-bob. EXPLAINbilan tekshir.

EXPLAIN ANALYZE SELECT * FROM users WHERE email = 'a@b.uz';
-- "Seq Scan" (yomon — to'liq skan) yoki "Index Scan" (yaxshi)?

• Faqat kerakli ustunni — SELECT * emas, SELECT id, name.
• N+1'ni JOIN bilan almashtir.
• Batch — 1000 ta alohida INSERT emas, bitta ko'p qatorli INSERT.
• Denormalizatsiya (ehtiyotkorlik bilan) — o'qish-og'ir holatda tezlik uchun takror saqlash.
• Sekin so'rovni kuzat — slow query log.

Indeks bepul emas: yozishni sekinlashtiradi, joy oladi. Faqat kerakli ustunga qo'y.

6. Keshlash strategiyasi

Qatlamlar (yuqoridan — tezroq):
  Brauzer kesh  CDN  App kesh (Redis)  DB query kesh  DB

• Nimani kesh: tez-tez o'qiladigan, kam o'zgaradigan ma'lumot.
• Cache invalidation (eng qiyin muammo): ma'lumot o'zgarganda keshni yangilash/o'chirish. Strategiyalar: TTL (muddat), o'zgarishda o'chirish (write-through/invalidate).
• Stale-while-revalidate — eski keshni ber, fonda yangila.

"Kompyuterda 2 ta qiyin narsa bor: cache invalidation va narsalarga nom berish." — mashhur hazil, lekin haqiqat.

7. Tarmoq optimizatsiya

• So'rovlar sonini kamaytir — birlashtir (batch), GraphQL (kerakli maydon).
• Siqish (compression) — gzip/brotli (matn javoblar).
• HTTP/2, keep-alive — ulanishni qayta ishlat.
• Debounce/throttle — tez-tez so'rovni cheklash (qidiruv inputi).

8. Algoritmik optimizatsiya (3-QISM)

Ko'pincha eng katta yutuq — algoritmni o'zgartirish (Big-O):

O(n²)  O(n log n)   — saralash bilan
O(n) qidiruv  O(1)  — Map/Set bilan
Takror hisob  kesh  — memoizatsiya

Misol: massivda dublikat topish — ichma-ich tsikl O(n²) Set bilan O(n).

9. O'lchov mezonlari (nishonlar)

10. Anti-patternlar (qochish kerak)

• O'lchamasdan optimallashtirish (taxmin bilan).
• Mikro-optimizatsiya (i++ vs ++i) — ahamiyatsiz.
• Erta keshlash — murakkablik, invalidation bug.
• SELECT * katta jadvalda.
• Tsiklda so'rov (N+1).
• Hamma narsani RAM'ga yuklash (stream o'rniga).

Mashq

1. Bir sekin sahifani Lighthouse bilan o'lchab, 3 ta muammoni top va tuzat.
2. N+1 so'rovli kodni JOIN bilan optimallashtir; vaqtni o'lcha.
3. Tez-tez o'qiladigan endpoint'ga Redis kesh qo'sh.
4. O(n²) algoritmni Map bilan O(n) ga tushir.

Bog'liq: 13.7 kesh, 6.9 indeks · Bosh sahifa: README.