Teknik Pengoptimuman JavaScript roven untuk Meningkatkan Prestasi

Sebagai pengarang terlaris, saya menjemput anda untuk menerokai buku saya di Amazon. Jangan lupa ikuti saya di Medium dan tunjukkan sokongan anda. terima kasih! Sokongan anda bermakna dunia!

Pengoptimuman JavaScript adalah penting untuk meningkatkan prestasi aplikasi dan pengalaman pengguna. Saya telah melaksanakan pelbagai teknik untuk meningkatkan kelajuan pelaksanaan kod dalam projek saya. Berikut ialah enam kaedah berkesan yang saya dapati amat berguna:

Menghafal ialah teknik berkuasa yang sering saya gunakan untuk menyimpan hasil fungsi yang mahal. Dengan menyimpan output operasi yang mahal, kita boleh mengelakkan pengiraan berlebihan dan meningkatkan prestasi dengan ketara. Berikut ialah contoh cara saya melaksanakan hafalan:

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFunction = (n) => {
  // Simulate an expensive calculation
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
};

const memoizedExpensiveFunction = memoize(expensiveFunction);

console.time('First call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('Second call');

Dalam contoh ini, panggilan pertama ke fungsi yang dihafal akan mengambil masa yang lebih lama, tetapi panggilan berikutnya dengan hujah yang sama akan menjadi lebih pantas kerana hasilnya diperoleh daripada cache.

Menyahlantun dan pendikit ialah teknik yang saya gunakan untuk mengawal kadar pelaksanaan fungsi, terutamanya untuk operasi intensif prestasi. Nyahlantun memastikan bahawa fungsi hanya dipanggil selepas tempoh masa tertentu berlalu sejak seruan terakhirnya, manakala pendikit mengehadkan bilangan kali fungsi boleh dipanggil dalam tempoh tertentu.

Begini cara saya melaksanakan nyahlantun:

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const expensiveOperation = () => {
  console.log('Performing expensive operation...');
};

const debouncedOperation = debounce(expensiveOperation, 300);

// Simulate rapid function calls
for (let i = 0; i < 5; i++) {
  debouncedOperation();
}

Dan berikut ialah contoh pendikit:

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

const scrollHandler = () => {
  console.log('Handling scroll event...');
};

const throttledScrollHandler = throttle(scrollHandler, 100);

window.addEventListener('scroll', throttledScrollHandler);

Teknik ini amat berguna untuk mengendalikan acara seperti menatal atau mengubah saiz, di mana panggilan fungsi yang berlebihan boleh membawa kepada isu prestasi.

Apabila mencipta objek dan tatasusunan, saya sentiasa lebih suka menggunakan tatatanda literal daripada pembina. Pendekatan ini bukan sahaja lebih ringkas tetapi juga lebih cepat dari segi pelaksanaan. Ini perbandingannya:

// Slower
const obj1 = new Object();
obj1.name = 'John';
obj1.age = 30;

const arr1 = new Array();
arr1.push(1, 2, 3);

// Faster
const obj2 = { name: 'John', age: 30 };
const arr2 = [1, 2, 3];

Notasi literal adalah lebih cekap kerana ia mencipta objek atau tatasusunan dalam satu operasi, manakala pendekatan pembina memerlukan berbilang langkah.

Pembolehubah global boleh memberi kesan ketara kepada prestasi disebabkan peningkatan masa carian. Saya membuat usaha sedar untuk meminimumkan penggunaannya dalam kod saya. Sebaliknya, saya merangkum pembolehubah dalam fungsi atau modul untuk meningkatkan kelajuan pelaksanaan. Berikut ialah contoh cara saya memfaktorkan semula kod untuk mengelakkan pembolehubah global:

// Avoid this
let counter = 0;
function incrementCounter() {
  counter++;
  console.log(counter);
}

// Prefer this
function createCounter() {
  let counter = 0;
  return function() {
    counter++;
    console.log(counter);
  };
}

const incrementCounter = createCounter();
incrementCounter();
incrementCounter();

Dengan menggunakan penutupan, kami boleh mengekalkan keadaan tanpa bergantung pada pembolehubah global, yang membawa kepada pelaksanaan kod yang lebih pantas dan boleh diramal.

Mengoptimumkan gelung ialah satu lagi bidang yang saya fokuskan untuk meningkatkan prestasi. Saya lebih suka menggunakan untuk...gelung untuk tatasusunan dan untuk...dalam gelung untuk objek. Binaan ini biasanya lebih pantas dan lebih mudah dibaca daripada gelung tradisional. Di samping itu, saya cuba mengelakkan rantaian kaedah tatasusunan yang tidak perlu, kerana ia boleh mencipta tatasusunan perantaraan dan memberi kesan kepada prestasi. Berikut ialah contoh penggunaan gelung yang dioptimumkan:

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFunction = (n) => {
  // Simulate an expensive calculation
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
};

const memoizedExpensiveFunction = memoize(expensiveFunction);

console.time('First call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('Second call');

Apabila ia datang untuk mengakses pembolehubah dalam fungsi, saya mendapati bahawa menggunakan pembolehubah tempatan dan bukannya sifat objek boleh membawa kepada pelaksanaan yang lebih pantas. Ini kerana carian pembolehubah tempatan biasanya lebih cepat daripada carian harta pada objek. Berikut ialah contoh cara saya mengoptimumkan kod menggunakan teknik ini:

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const expensiveOperation = () => {
  console.log('Performing expensive operation...');
};

const debouncedOperation = debounce(expensiveOperation, 300);

// Simulate rapid function calls
for (let i = 0; i < 5; i++) {
  debouncedOperation();
}

Dalam contoh ini, caching sifat objek dalam pembolehubah setempat membawa kepada pelaksanaan yang lebih pantas, terutamanya dalam gelung atau fungsi yang sering dipanggil.

Teknik pengoptimuman ini telah meningkatkan prestasi aplikasi JavaScript saya dengan ketara. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa pengoptimuman pramatang boleh membawa kepada kod yang terlalu kompleks. Saya sentiasa mengesyorkan memprofil dan mengukur prestasi sebelum menggunakan teknik ini untuk memastikan ia menangani kesesakan sebenar dalam aplikasi anda.

Selain teknik pengoptimuman teras ini, saya telah menemui beberapa amalan lain yang menyumbang kepada pelaksanaan JavaScript yang lebih pantas:

1. Gunakan mod ketat: Menambahkan 'guna ketat' pada permulaan skrip atau fungsi anda boleh membantu menangkap ralat lebih awal dan menghalang penggunaan ciri tertentu yang terdedah kepada ralat, yang berpotensi meningkatkan prestasi.

2. Elakkan manipulasi DOM yang tidak perlu: Meminimumkan interaksi DOM langsung dan membancuh kemas kini DOM boleh meningkatkan prestasi dengan ketara, terutamanya dalam aplikasi web yang kompleks.

3. Manfaatkan Pekerja Web: Untuk tugasan intensif pengiraan yang tidak memerlukan akses DOM, Pekerja Web boleh memunggah pemprosesan ke urutan latar belakang, memastikan urutan utama responsif.

4. Optimumkan parameter fungsi: Apabila fungsi tidak menggunakan kata kunci 'ini', pertimbangkan untuk menggunakan fungsi anak panah untuk meningkatkan prestasi yang sedikit.

5. Gunakan struktur data yang sesuai: Memilih struktur data yang betul (cth., Tetapkan untuk nilai unik, Peta untuk pasangan nilai kunci) boleh membawa kepada algoritma yang lebih cekap dan prestasi yang lebih baik.

6. Manfaatkan cache penyemak imbas: Mengkonfigurasi pengepala cache dengan betul boleh mengurangkan beban pelayan dan meningkatkan responsif aplikasi untuk pengguna yang kembali.

7. Minimumkan saiz fail JavaScript: Gunakan teknik pengecilan dan pemampatan untuk mengurangkan saiz fail JavaScript anda, yang membawa kepada masa muat turun dan hurai yang lebih pantas.

8. Elakkan panggilan fungsi yang tidak perlu: Kod refactor untuk menghapuskan panggilan fungsi berlebihan, terutamanya dalam gelung atau laluan kod yang kerap dilaksanakan.

9. Gunakan literal templat untuk penyatuan rentetan: Literasi templat selalunya lebih cekap daripada kaedah penggabungan rentetan tradisional.

10. Manfaatkan ciri JavaScript moden: Gunakan ciri seperti penstrukturan, pengendali penyebaran dan rantaian pilihan untuk kod yang lebih ringkas dan berkemungkinan lebih pantas.

Berikut ialah contoh yang menggabungkan beberapa teknik pengoptimuman tambahan ini:

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFunction = (n) => {
  // Simulate an expensive calculation
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
};

const memoizedExpensiveFunction = memoize(expensiveFunction);

console.time('First call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('Second call');

Dalam contoh ini, kami menggunakan mod ketat, memanfaatkan struktur data yang sesuai (Tetapkan dan Peta), mengoptimumkan parameter fungsi dengan fungsi anak panah, menggunakan literal templat untuk penggabungan rentetan dan menunjukkan penggunaan ciri JavaScript moden seperti penstrukturan. Kami juga menunjukkan cara menyediakan Pekerja Web untuk memuatkan pengiraan berat.

Ingat, kunci kepada pengoptimuman yang berkesan ialah memfokuskan pada bidang yang akan memberikan peningkatan prestasi yang paling ketara. Sentiasa profilkan kod anda dan kenal pasti kesesakan sebenar sebelum menggunakan teknik pengoptimuman. Dalam kebanyakan kes, menulis kod yang bersih dan boleh dibaca adalah lebih penting daripada pengoptimuman mikro yang mungkin hanya memberikan faedah kecil.

Sambil anda terus berusaha mengoptimumkan kod JavaScript anda, perlu diingat bahawa enjin JavaScript dan pelaksanaan penyemak imbas sentiasa berkembang. Apa yang mungkin pengoptimuman hari ini boleh menjadi tidak perlu atau malah tidak produktif pada masa hadapan. Kekal dikemas kini dengan amalan terbaik terkini dan sentiasa menguji pengoptimuman anda dalam senario dunia sebenar.

Akhir sekali, jangan lupa tentang kepentingan prestasi yang dilihat. Walaupun teknik ini menumpukan pada kelajuan pelaksanaan sebenar, faktor seperti pemuatan progresif, skrin rangka dan kemas kini UI yang optimis boleh meningkatkan persepsi pengguna terhadap kelajuan dan responsif aplikasi anda dengan ketara.

Dengan menggunakan teknik pengoptimuman ini secara konsisten dan sentiasa mengingati prestasi sepanjang proses pembangunan, anda boleh mencipta aplikasi JavaScript yang lebih pantas dan cekap yang memberikan pengalaman pengguna yang sangat baik.

---

101 Buku

101 Buku ialah syarikat penerbitan dipacu AI yang diasaskan bersama oleh pengarang Aarav Joshi. Dengan memanfaatkan teknologi AI termaju, kami memastikan kos penerbitan kami sangat rendah—sesetengah buku berharga serendah $4—menjadikan pengetahuan berkualiti boleh diakses oleh semua orang.

Lihat buku kami Kod Bersih Golang tersedia di Amazon.

Nantikan kemas kini dan berita menarik. Apabila membeli-belah untuk buku, cari Aarav Joshi untuk mencari lebih banyak tajuk kami. Gunakan pautan yang disediakan untuk menikmati diskaun istimewa!

Ciptaan Kami

Pastikan anda melihat ciptaan kami:

Pusat Pelabur | Pelabur Central Spanish | Pelabur Jerman Tengah | Hidup Pintar | Epos & Gema | Misteri Membingungkan | Hindutva | Pembangunan Elit | Sekolah JS

---

Kami berada di Medium

Tech Koala Insights | Dunia Epok & Gema | Medium Pusat Pelabur | Medium Misteri Membingungkan | Sains & Zaman Sederhana | Hindutva Moden

Atas ialah kandungan terperinci Teknik Pengoptimuman JavaScript roven untuk Meningkatkan Prestasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!