Frontend Developer üçün Must-Know JS Performans Texnikaları

Frontend Developer üçün Must-Know JS Performans Texnikaları

Salam, developer dostum! 👋

Bakıda frontend developer kimi işləyirsənsə və ya müsahibələrə hazırlaşırsansa, bir həqiqəti qəbul edək: "işləyir" kifayət deyil. 2026-da bazarda rəqabət sərtdir — Kapital Bank, ABB, Pasha Holding, SOCAR-ın digital komandasında 2000-4000 AZN maaşlı frontend pozisiyaları üçün sənin kodun sadəcə düzgün yox, həm də sürətli olmalıdır.

Google-un Core Web Vitals hesabatına görə, səhifə yüklənmə müddəti 2.5 saniyədən çox olan saytlarda istifadəçilərin 53%-i səhifəni tərk edir. Azərbaycan e-commerce bazarında — Umico, Tap.az, Bazar Store kimi platformalarda hər itirilmiş istifadəçi birbaşa itmiş gelirdir.

Gəl, real layihələrdə fərq yaradan 7 JS performans texnikasını bir-bir keçək.

---

1. Debounce və Throttle — Event Selini Cilovla

İstifadəçi search inputa hər hərf yazdıqda API çağırırsan? Təbrik edirəm, serveri DDoS edirsən 😄

Debounce istifadəçi yazmağı dayandırdıqdan sonra müəyyən müddət gözləyib yalnız bir dəfə icra edir:

javascriptKopyala
function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce((e) => {
  fetchResults(e.target.value); // 300ms gözləyib çağırır
}, 300));

Throttle isə scroll və resize eventləri üçün idealdır — müəyyən interval ərzində yalnız bir dəfə icra olunur. Real rəqəm: bir Tap.az klonu layihəsində debounce əlavə etdikdən sonra API çağırışları 12x azaldı.

---

2. Lazy Loading — Görünməyəni Yükləmə

Səhifədə 50 şəkil var, hamısını birlikdə yükləyirsən? Bu, xüsusilə Azərbaycanda mobil internetin bəzi regionlarda hələ 3G olduğunu nəzərə alsaq, böyük problemdir.

javascriptKopyala
// Native lazy loading — ən sadə yol
<img src="product.jpg" loading="lazy" alt="Məhsul" />

// Intersection Observer ilə daha çevik kontrol
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

Bu texnika ilə initial page load 40-60% yüngülləşə bilər.

---

3. Code Splitting — Hər Şeyi Birdən Yükləmə

React və ya Vue istifadə edirsənsə, React.lazy() və dynamic import() ilə yalnız lazım olan komponenti yüklə:

javascriptKopyala
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));
const Analytics = lazy(() => import('./Analytics'));

function App() {
  return (
    <Suspense fallback={<div>Yüklənir...</div>}>
      <Dashboard />
    </Suspense>
  );
}

Webpack bundle analyzer ilə yoxladıqda, tipik bir Azərbaycan startup layihəsində bundle size 1.8MB-dan 620KB-a düşdüyünü görmüşəm.

---

4. Virtual List — Böyük Siyahıları Render Etmə Sənəti

10,000 məhsulun olduğu siyahını DOM-a atırsan? Brauzer ağlayır. react-window və ya @tanstack/virtual istifadə et:

javascriptKopyala
import { FixedSizeList } from 'react-window';

const ProductList = ({ products }) => (
  <FixedSizeList
    height={600}
    itemCount={products.length}
    itemSize={80}
    width="100%"
  >
    {({ index, style }) => (
      <div style={style}>{products[index].name}</div>
    )}
  </FixedSizeList>
);

10,000 element əvəzinə yalnız ekranda görünən 15-20 element render olunur. DOM node sayı 500x azalır.

---

5. Memoization — Eyni Hesablamanı Təkrarlama

useMemo və React.memo sadəcə interview buzzword deyil, real performans qazancıdır:

javascriptKopyala
import { useMemo } from 'react';

function OrderSummary({ items }) {
  const total = useMemo(() => {
    return items.reduce((sum, item) => sum + item.price * item.qty, 0);
  }, [items]); // yalnız items dəyişəndə yenidən hesablayır

  return <span>{total} AZN</span>;
}

Ancaq diqqət: hər yerə useMemo qoymaq da yanlışdır. Yalnız hesablama ağır olanda və ya referans bərabərliyi vacib olanda istifadə et.

---

6. Web Workers — Main Thread-i Azad Et

Ağır hesablama — məsələn, böyük JSON parsing, şəkil emalı, kriptoqrafiya — main thread-də olarsa, UI donur:

javascriptKopyala
// worker.js
self.onmessage = (e) => {
  const result = heavyCalculation(e.data);
  self.postMessage(result);
};

// main.js
const worker = new Worker('worker.js');
worker.postMessage(largeData);
worker.onmessage = (e) => {
  console.log('Nəticə:', e.data); // UI donmadan
};

Bu texnika xüsusilə fintech layihələrində — hesabat generasiyası, qrafik data emalı kimi hallarda çox işə yarayır.

---

7. requestAnimationFrame — Animasiyaları Düzgün Et

setInterval ilə animasiya edən developer-lər, 2026-da bunu etməyin 😅. requestAnimationFrame brauzer render dövrünə sinxronlaşır (60fps):

javascriptKopyala
function animate(element) {
  let position = 0;
  function step() {
    position += 2;
    element.style.transform = `translateX(${position}px)`;
    if (position < 300) {
      requestAnimationFrame(step);
    }
  }
  requestAnimationFrame(step);
}

---

Bonus: Performansı Ölçmək üçün Alətlər

• Lighthouse — Chrome DevTools-da daxili audit
• WebPageTest — real cihaz və lokasiyadan test
• Performance tab — runtime bottleneck-ləri görmək üçün
• Bundle Analyzer — Webpack/Vite bundle size analizi

Qayda belədir: ölçmədən optimize etmə. Əvvəlcə profil et, bottleneck-i tap, sonra həll et.

---

Son Söz

Bu texnikaların hamısını bilmək sənin müsahibədə fərqlənməyinə, layihədə dəyər yaratmağına birbaşa kömək edəcək. Bakıda artan tech ecosystem-də — istər startup, istər korporativ — performans bilən frontend developer həmişə tələb olunur.

Bir şeyi unutma: premature optimization bütün bəlaların kökü ola bilər. Əvvəlcə işlət, sonra ölç, sonra optimize et. Amma bu texnikaları bilmək — artıq yarı qələbədir. 🚀

Sualın var? Kommentdə yaz, birlikdə debug edək!