JavaScript tezlik va optimallashtirish

Sekin sahifadan foydalanuvchi ketadi. Bu darsda tezlikka eng ko’p ta’sir qiladigan joylar va ularni qanday o’lchash kerakligi.

Avval o’lchang

JavaScript

function olcha(nom, amal) {
const boshi = performance.now();
const natija = amal();
const vaqt = performance.now() - boshi;
console.log(nom + ": " + vaqt.toFixed(2) + " ms");
return natija;
}

const massiv = Array.from({ length: 200000 }, (_, i) => i);

olcha("for sikli", () => {
let s = 0;
for (let i = 0; i < massiv.length; i++) s += massiv[i];
return s;
});

olcha("for...of", () => {
let s = 0;
for (const n of massiv) s += n;
return s;
});

olcha("reduce", () => massiv.reduce((a, b) => a + b, 0));

performance.now() — Date.now() dan aniqroq (kasr millisekund).

Qidiruv: massiv va Set

JavaScript

const n = 50000;
const massiv = Array.from({ length: n }, (_, i) => i);
const toplam = new Set(massiv);

const boshi1 = performance.now();
let topildi1 = 0;
for (let i = 0; i < 2000; i++) {
if (massiv.includes(n - 1)) topildi1++;
}
console.log("includes:", (performance.now() - boshi1).toFixed(1), "ms");

const boshi2 = performance.now();
let topildi2 = 0;
for (let i = 0; i < 2000; i++) {
if (toplam.has(n - 1)) topildi2++;
}
console.log("Set.has:", (performance.now() - boshi2).toFixed(1), "ms");

Farq juda katta. Ko’p marta qidiriladigan ma’lumot uchun Set yoki Map tanlang — bu eng ko’p foyda beradigan o’zgarishlardan biri.

Ichma-ich sikldan qutulish

JavaScript

const talabalar = Array.from({ length: 1000 }, (_, i) => ({
id: i, ism: "Talaba " + i,
}));
const ballar = Array.from({ length: 1000 }, (_, i) => ({
talabaId: i, ball: 60 + (i % 40),
}));

// Sekin: har talaba uchun butun ballar massivi qidiriladi
const boshi1 = performance.now();
const natija1 = talabalar.map((t) => ({
...t,
ball: ballar.find((b) => b.talabaId === t.id)?.ball,
}));
console.log("find bilan:", (performance.now() - boshi1).toFixed(1), "ms");

// Tez: avval Map yasaladi, keyin bir marta yuriladi
const boshi2 = performance.now();
const xarita = new Map(ballar.map((b) => [b.talabaId, b.ball]));
const natija2 = talabalar.map((t) => ({ ...t, ball: xarita.get(t.id) }));
console.log("Map bilan:", (performance.now() - boshi2).toFixed(1), "ms");

console.log("Natija bir xil:", natija1[500].ball === natija2[500].ball);

Birinchi variant har element uchun qidiruv qiladi — ish hajmi kvadratik o’sadi. Ikkinchisida ma’lumot bir marta indekslanadi.

DOM — eng qimmat qism

JavaScript

const n = 2000;

const a = document.querySelector("#a");
const boshi1 = performance.now();
for (let i = 0; i < n; i++) {
const div = document.createElement("div");
div.textContent = "Qator " + i;
a.append(div);
}
console.log("Bittalab append:", (performance.now() - boshi1).toFixed(1), "ms");

const b = document.querySelector("#b");
const boshi2 = performance.now();
const parcha = document.createDocumentFragment();
for (let i = 0; i < n; i++) {
const div = document.createElement("div");
div.textContent = "Qator " + i;
parcha.append(div);
}
b.append(parcha);
console.log("Fragment bilan:", (performance.now() - boshi2).toFixed(1), "ms");

Sahifa

DocumentFragment sahifaga bir marta tegadi, bittalab append esa har safar.

O’qish va yozishni aralashtirmang

// ❌ Yomon: har aylanishda majburiy reflow
for (const el of elementlar) {
  el.style.height = el.offsetHeight + 10 + "px";
}

// ✅ Yaxshi: avval hammasini o'qish, keyin yozish
const balandliklar = elementlar.map((el) => el.offsetHeight);
elementlar.forEach((el, i) => {
  el.style.height = balandliklar[i] + 10 + "px";
});

O’qish va yozish navbatlashsa, brauzer har safar qaytadan hisoblashga majbur bo’ladi — bu layout thrashing deb ataladi.

Hodisalarni cheklash

Tez-tez ishlaydigan hodisalar (scroll, resize, input) uchun debounce va throttle majburiy:

window.addEventListener("scroll", throttle(() => {
  console.log(window.scrollY);
}, 100));

Aks holda funksiya soniyasiga o’nlab marta chaqiriladi.

Xotira oqishi

JavaScript

// Tinglovchi olib tashlanmasa, element xotirada qoladi
function yomon(element) {
const kattaMalumot = new Array(100000).fill("x");
element.addEventListener("click", () => {
  console.log(kattaMalumot.length);
});
}

// To'g'ri: kerak bo'lmaganda olib tashlash
function yaxshi(element) {
const amal = () => console.log("bosildi");
element.addEventListener("click", amal);
return () => element.removeEventListener("click", amal);
}

console.log("Tozalash funksiyasini qaytarish — standart naqsh");

// Yoki avtomatik: bir marta ishlaydigan tinglovchi
console.log("Muqobil: { once: true } yoki AbortController");

Uch keng tarqalgan sabab: olib tashlanmagan tinglovchilar, to’xtatilmagan setInterval va o’sib boruvchi global massiv/kesh.

Yuklash tezligi

Ko’pincha JavaScript’ning hajmi uning tezligidan muhimroq:

Usul	Ta’siri
Dinamik `import()`	Kerak bo’lmagan kod yuklanmaydi
Tree shaking	Ishlatilmagan eksportlar tushmaydi
Kutubxonani tanlash	Katta paket o’rniga kichigi yoki o’z kodingiz
`defer` / `type="module"`	HTML tahlilini to’smaydi
Rasm formati va o’lchami	Odatda JS’dan ko’proq bayt

O’lchash vositalari

DevTools → Performance — yozib olish, qaysi funksiya qancha vaqt olganini ko’rish;
Lighthouse — sahifa bahosi va tavsiyalar;
Network — nima yuklanmoqda va qancha vaqtda;
performance.now() — kod ichida aniq o’lchov.

DevTools darsida asosiy panellar ko’rilgan.

Amaliy mashq

performance.now() bilan uch xil sikl usulini solishtiring;
includes va Set.has ni katta massivda o’lchang;
ichma-ich find ni Map bilan almashtiring;
2000 element qo’shishni fragment bilan va fragmentsiz o’lchang;
scroll hodisasiga throttle qo’shing;
DevTools Performance panelida yozib olib ko’ring.

Qisqacha xulosa

Avval o’lchang — taxmin bilan optimallashtirmang.
Ko’p qidiriladigan ma’lumot uchun Set/Map — eng katta foyda.
Ichma-ich sikl o’rniga oldindan indeks yasang.
DOM’ga bir marta teging: DocumentFragment, guruhlangan o’zgartirish.
O’qish va yozishni aralashtirmang (layout thrashing).
Tinglovchi va setInterval ni tozalang — xotira oqishi.
Ko’pincha kod hajmi tezligidan muhimroq.

Keyingi darsda xavfsizlik asoslari.