JavaScript үндэс / Гүйцэтгэлийн оновчлол

Гүйцэтгэлийн оновчлол

Ажиллаж байгаа код байхад сайн. Хурдан ажиллаж байгаа код байхад бүр сайн. Гүйцэтгэлийн оновчлол (performance optimization) нь кодыг илүү хурдан, санах ойг хэмнэмж ажиллуулах арга барил юм. Гэхдээ анхааруулга: эхлээд ажиллуулж, дараа нь оновчил — оновчлол хэтэрвэл код уншихад хэцүү болдог. Хэмжиж, баталж, дараа нь засна.

Хэмжих — юу удаан байгааг мэдэх

Таамгаарч засахаас өмнө юу удаан байгааг хэмжих хэрэгтэй. console.time() ба performance.now() хоёр хялбар хэрэгсэл юм.

javascript

// console.time() — хялбар арга
console.time("давталт");

let нийлбэр = 0;
for (let i = 0; i < 1_000_000; i++) {
  нийлбэр += i;
}

console.timeEnd("давталт"); // давталт: 4.123ms

// performance.now() — нарийн хэмжилт
const эхлэл = performance.now();

const массив = Array.from({ length: 100_000 }, (_, i) => i * 2);

const төгсгөл = performance.now();
console.log(`Зарцуулсан хугацаа: ${(төгсгөл - эхлэл).toFixed(2)}ms`);

Debounce ба Throttle — давтамжийг хянах

Хэрэглэгч хайлтын хайрцагт бичих бүрт сервер рүү хүсэлт илгээвэл маш олон хүсэлт явна. Debounce нь хэрэглэгч бичихээ зогсоосны дараа л нэг удаа ажиллана. Throttle нь тодорхой хугацааны давтамжаар хязгаарлана.

javascript

// Debounce — зогсоосны дараа л ажиллана
function debounce(функц, хугацаа) {
  let таймер;
  return function (...аргументууд) {
    clearTimeout(таймер);
    таймер = setTimeout(() => функц(...аргументууд), хугацаа);
  };
}

const хайх = debounce(function (утга) {
  console.log("Хайж байна:", утга);
  // fetch(`/api/search?q=${утга}`)
}, 300);

// Хэрэглэгч бичих бүрт дуудагдах боловч 300мс-ын дараа л ажиллана
document.querySelector("#хайлт").addEventListener("input", (е) => {
  хайх(е.target.value);
});

javascript

// Throttle — хэд хэдэн удаа дуудагдсан ч хугацаанд нэг удаа л ажиллана
function throttle(функц, хугацаа) {
  let сүүлийн = 0;
  return function (...аргументууд) {
    const одоо = Date.now();
    if (одоо - сүүлийн >= хугацаа) {
      сүүлийн = одоо;
      функц(...аргументууд);
    }
  };
}

const гүйлгэлт_боловсруулах = throttle(function () {
  console.log("Гүйлгэлтийн байршил:", window.scrollY);
}, 100); // 100мс тутамд нэг удаа

window.addEventListener("scroll", гүйлгэлт_боловсруулах);

Санах ойн оновчлол

Нэг удаа тооцсон үр дүнг кэшлэж (cache) дахин тооцохоос зайлсхийнэ — үүнийг memoization гэнэ:

javascript

function мemoize(функц) {
  const кэш = new Map();
  return function (...аргументууд) {
    const түлхүүр = JSON.stringify(аргументууд);
    if (кэш.has(түлхүүр)) {
      return кэш.get(түлхүүр); // хадгалсан үр дүнг буцаана
    }
    const үр_дүн = функц(...аргументууд);
    кэш.set(түлхүүр, үр_дүн);
    return үр_дүн;
  };
}

// Fibonacci-г рекурсаар бодох нь маш удаан — memoize-тай бол хурдан
const fib = мemoize(function (n) {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2);
});

console.time("fib");
console.log(fib(40)); // 102334155
console.timeEnd("fib"); // ~1мс

DOM-д хандах давтамжийг багасгах

DOM-тэй харилцах нь JavaScript-ийн хамгийн удаан үйлдлүүдийн нэг юм. Бүлэглэж хийх нь хурдыг эрс нэмэгдүүлнэ:

javascript

const жагсаалт = document.querySelector("#жагсаалт");
const өгөгдөл = ["Болд", "Сарнай", "Ганаа", "Нарантуяа"];

// Муу — DOM-д 4 удаа хандана
өгөгдөл.forEach((нэр) => {
  const li = document.createElement("li");
  li.textContent = нэр;
  жагсаалт.appendChild(li); // бүр нэмэх бүрт дахин зурна
});

// Сайн — DocumentFragment ашиглан нэг удаа нэмнэ
const хэсэг = document.createDocumentFragment();
өгөгдөл.forEach((нэр) => {
  const li = document.createElement("li");
  li.textContent = нэр;
  хэсэг.appendChild(li);
});
жагсаалт.appendChild(хэсэг); // DOM-д зөвхөн нэг удаа хандана

Оновчлол бол эрдэм — гэхдээ эрт оновчлох нь цагийн үрэлгэн юм. Хэмж, ол, зас. Энэ гурван алхам л чухал.

Дараагийн хичээлд:

Тест бичих үндэс — Jest ашиглан функцүүдэй автоматаар шалгах, найдвартай код бичих арга барилыг үзнэ.

← Өмнөх хичээлВэбийн API-ууд (Clipboard, Geolocation)Дараах хичээл →Тест бичих үндэс (Jest)