Bagaimana untuk meningkatkan prestasi JavaScript?

Dalam dunia hari ini, hampir setiap tapak web menggunakan JavaScript. Aplikasi web menjadi lebih kompleks dan interaktif pengguna, yang membawa kepada isu prestasi. Ia membawa kepada pengalaman pengguna yang buruk, yang tidak diingini untuk mana-mana aplikasi web. Faktor yang berbeza boleh menyebabkan prestasi lemah, masa pemuatan yang lama dan masa tindak balas yang panjang.

Dalam tutorial ini, kami akan membincangkan semua faktor ini dan cara menyelesaikan masalah ini dan meningkatkan prestasi JavaScript.

Kod ringan dan padat

Perkara pertama yang boleh anda lakukan untuk meningkatkan prestasi JavaScript ialah menulis kod yang ringan dan padat. Kod JavaScript boleh mempunyai berbilang modul dan beberapa fungsi atau pembolehubah yang tidak digunakan, yang boleh dialih keluar dengan mudah daripada kod. Ia akan meningkatkan masa penyusunan JavaScript, menghasilkan prestasi yang lebih baik. Selain itu, menggunakan algoritma lanjutan untuk melaksanakan tugas yang kompleks boleh menjadi sangat bermanfaat dalam meningkatkan prestasi.

Gunakan pembolehubah setempat

JavaScript mengakses pembolehubah tempatan lebih cepat daripada pembolehubah global, jadi menggunakan pembolehubah tempatan boleh meningkatkan prestasi JavaScript. Setiap kali kita mengakses pembolehubah, JavaScript mula-mula mencari pembolehubah dalam skop setempat dan kemudian mencari pembolehubah global. Jika semua pembolehubah ditakrifkan dalam skop setempat, ia akan mengurangkan masa untuk mengaksesnya. Tambahan pula, pembolehubah tempatan dimusnahkan selepas panggilan fungsi selesai, tetapi pembolehubah global mengekalkan nilainya dalam ingatan. Ini juga boleh menyebabkan masalah ingatan.

// Local variables
const id = 10
let value = 'Tutorialspoint'
// Global variables
var key = 'JavaScript'

Kurangkan akses DOM

Mengakses DOM dan memanipulasinya ialah salah satu fungsi JavaScript yang paling penting. Tetapi terlalu banyak akses yang tidak perlu kepada DOM boleh menyebabkan masalah prestasi yang besar. Setiap kali kami memanipulasi elemen dalam DOM, DOM dimuatkan semula dengan keadaan dikemas kini dan jika anda terus mengemas kini elemen DOM setiap saat, DOM akan dimuat semula setiap saat. Oleh itu, adalah disyorkan untuk mengemas kini DOM apabila perlu. Jika pengguna perlu mengemas kini elemen beberapa kali, lebih baik untuk menyimpan objek elemen dalam pembolehubah dan menggunakan pembolehubah itu untuk mengemas kini DOM.

let element = document.getElementById('element_id')
element.innerHTML = 'Tutorialspoint'

Kurangkan bilangan lelaran gelung

Gelung ialah cara mudah untuk menyelesaikan beberapa tugasan yang berulang, tetapi ia juga boleh membawa kepada prestasi yang lemah. Gelung lelaran panjang mengambil banyak masa untuk diselesaikan, jadi sebaiknya elakkan menggunakan gelung panjang jika boleh. Sebaliknya, gunakan gelung kecil dan lakukan tugas minimum dalam gelung. Selain itu, jangan akses DOM dalam gelung; ini akan menyebabkan masalah prestasi yang besar kerana anda memanipulasi DOM pada setiap lelaran gelung.

let names = ['abc', 'xyz', 'mno', 'pqr'];
let element = document.getElementById('element_id');
// DON’T DO THIS
for(let index=0; i<names.length; i++){
   element.innerHTML += names[index] + ' ';
}
// DO THIS
let str = '';
for(let index=0; i<names.length; i++){
   str += names[index];
}
element.innerHTML = str;

Gunakan pengaturcaraan tak segerak

Pengaturcaraan tak segerak ialah salah satu cara terbaik untuk meningkatkan prestasi aplikasi web. Dalam pengaturcaraan tak segerak, pelaksanaan kod dilakukan secara tak segerak, jadi pelbagai tugas boleh dilakukan serentak. Ia menghasilkan pemuatan data yang cepat dan tindak balas yang cepat. Dalam JavaScript, operasi tak segerak dilakukan oleh AJAX, yang bermaksud Asynchronous Javascript dan XML.

let http = new XMLHttpRequest()
http.open('GET', '...URL')
http.onload = function(){
   console.log(this.response); // the response
}

Letakkan JavaScript di bahagian bawah halaman

Apabila JavaScript diletakkan di bahagian atas halaman, ia dilaksanakan apabila halaman dimuatkan, jadi ia mengambil sedikit masa tambahan untuk memuatkan keseluruhan halaman. Ia menyebabkan halaman dimuatkan dengan perlahan. Untuk menyelesaikan masalah ini, JavaScript harus diletakkan di bahagian bawah halaman supaya JavaScript mula melaksanakan selepas keseluruhan halaman dimuatkan.

Contoh

<html>
<body>
   <div>Your Page Content</div>
   <div id='element'></div>
   <script>
      // JavaScript Code at Page's Bottom
      document.getElementById('element').innerHTML = 'Welcome to
      Tutorialspoint'
   </script>
</body>
</html>

Menghapuskan kebocoran ingatan

Jika aplikasi web mengalami kebocoran memori, maka aplikasi akan memperuntukkan lebih banyak memori, menyebabkan masalah prestasi dan memori yang besar. Untuk menyelesaikan isu ini, pastikan tiada kebocoran memori dalam aplikasi anda dan semak sama ada pembolehubah tidak mengambil terlalu banyak nilai. Pengguna boleh melihat kebocoran memori dalam alat pembangunan Chrome.

Gunakan algoritma pengoptimuman

Tugas kompleks dalam JavaScript biasanya mengambil banyak masa, yang boleh membawa kepada isu prestasi dan menggunakan algoritma yang dioptimumkan, kami boleh mengurangkan masa yang diperlukan untuk melaksanakan tugas. Tulis semula algoritma dengan cara yang lebih optimum untuk mendapatkan hasil yang terbaik. Selain itu, elakkan menggunakan gelung panjang, panggilan rekursif dan pembolehubah global.

Buat dan gunakan pembolehubah

Dalam JavaScript, hanya buat pembolehubah yang akan anda gunakan dan tahan nilai. Gunakan yang berikut dan elakkan baris kod dan pengisytiharan berubah yang tidak diperlukan -

document.write(num.copyWithin(2,0));

Elakkan menggunakan dengan

dengan kata kunci tidak mempunyai kesan yang baik pada kelajuan JavaScript. Elakkan menggunakannya dalam kod anda.

Gelung lebih pantas

Apabila menggunakan gelung, simpan tugasan di luar gelung. Ini akan menjadikan gelung lebih pantas -

var i;
// assignment outside the loop
var j = arr.length;
for (i = 0; i < j; i++) {
   // code
}

Gunakan alatan lain untuk mencari isu

Aplikasi web anda nampaknya berfungsi dengan baik, tetapi mungkin terdapat beberapa isu prestasi dan untuk mengenal pasti isu ini, beberapa alatan mungkin berguna. Rumah Api ialah alat analisis prestasi aplikasi web yang berguna. Ia membantu menyemak prestasi, amalan terbaik, kebolehaksesan dan SEO. Bukan sahaja alat ini terdapat di internet, tetapi terdapat alat lain yang boleh digunakan untuk menyemak prestasi aplikasi web dan kita hanya boleh melihat masalah dan cuba mengatasinya.

Atas ialah kandungan terperinci Bagaimana untuk meningkatkan prestasi JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!