Untuk memberikan pengalaman pengguna yang segar dan unik, banyak situs web menggunakan JavaScript untuk meningkatkan desain, memverifikasi formulir, memeriksa browser, serta permintaan AJAX, operasi cookie, dll., Untuk mencapai efek dinamis bebas refresh. Namun, jika Anda ingin membuat sejumlah besar konten di browser, jika tidak diproses dengan benar, kinerja situs web akan turun tajam. Jadi perlu untuk memahami cara meningkatkan efisiensi eksekusi JavaScript.
Fungsi JavaScript
Dalam JavaScript, fungsi dikompilasi sebelum digunakan. Meskipun kadang-kadang string dapat digunakan sebagai pengganti fungsi, kode JavaScript ini akan dikelompokkan kembali setiap kali dieksekusi, mempengaruhi kinerja.
1. Contoh evaluasi
Salinan kode adalah sebagai berikut:
eval ('output = (input * input)');
// disarankan untuk berubah menjadi:
eval (fungsi baru () {output = (input * input)});
2. Contoh SetTimeout
Salinan kode adalah sebagai berikut:
setTimeout ("Peringatan (1)", 1000);
// disarankan untuk berubah menjadi:
setTimeOut (function () {alert (1)}, 1000);
Gunakan fungsi alih -alih string sebagai parameter untuk memastikan bahwa kode dalam metode baru dapat dioptimalkan oleh kompiler JavaScript.
Lingkup JavaScript
Setiap ruang lingkup dalam rantai lingkup JavaScript berisi beberapa variabel. Penting untuk memahami rantai ruang lingkup sehingga Anda dapat memanfaatkannya.
Salinan kode adalah sebagai berikut:
var localvar = "global"; // Variabel global
function test () {
var localvar = "lokal"; // Variabel lokal
// Variabel lokal
Peringatan (LocalVar);
// Variabel global
waspada (this.localvar);
// Temukan dokumen dan variabel lokal tidak dapat ditemukan, jadi cari variabel global
var pagename = document.geteLementById ("pagename");
}
Menggunakan variabel lokal jauh lebih cepat daripada menggunakan variabel global, karena semakin jauh dalam rantai lingkup, semakin lambat parsing. Gambar berikut menunjukkan struktur rantai lingkup:
Jika ada dengan atau mencoba pernyataan tangkapan dalam kode, rantai ruang lingkup akan lebih rumit, seperti yang ditunjukkan pada gambar di bawah ini:
String javascript
Fungsi dalam JavaScript yang memiliki dampak kinerja yang sangat adalah gabungan string. Secara umum, tanda + digunakan untuk mengimplementasikan splicing string. Namun, browser awal tidak mengoptimalkan metode koneksi seperti itu, menghasilkan penciptaan berkelanjutan dan penghancuran string yang secara serius mengurangi efisiensi eksekusi JavaScript.
Salinan kode adalah sebagai berikut:
var txt = "halo" + "" + "dunia";
Disarankan untuk berubah menjadi:
Salinan kode adalah sebagai berikut:
var o = [];
o.push ("halo");
o.push ("");
o.push ("dunia");
var txt = o.join ();
Mari kita merangkum:
Salinan kode adalah sebagai berikut:
function stringBuffer (str) {
var arr = [];
arr.push (str || "");
this.append = function (str) {
arr.push (str);
kembalikan ini;
};
this.toString = function () {
return arr.join ("");
};
};
Kemudian panggil ini:
Salinan kode adalah sebagai berikut:
var txt = stringBuffer baru ();
txt.append ("halo");
txt.append ("");
txt.append ("dunia");
alert (txt.tostring ());
Operasi DOM JavaScript
HTML Document Object Model (DOM) mendefinisikan cara standar untuk mengakses dan memanipulasi dokumen HTML. Ini mewakili dokumen HTML sebagai pohon simpul yang berisi elemen, atribut, dan konten teks. Dengan menggunakan HTML DOM, JavaScript dapat mengakses dan memanipulasi semua node dalam dokumen HTML.
Dom mengecat ulang
Setiap kali objek DOM yang dimodifikasi ke halaman melibatkan dom redrawing, browser akan merender ulang halaman. Oleh karena itu, mengurangi jumlah modifikasi objek DOM dapat secara efektif meningkatkan kinerja JavaScript.
Salinan kode adalah sebagai berikut:
untuk (var i = 0; i <1000; i ++) {
var elmt = document.createElement ('p');
elmt.innerhtml = i;
Document.Body.AppendChild (Elmt);
}
Disarankan untuk berubah menjadi:
Salinan kode adalah sebagai berikut:
var html = [];
untuk (var i = 0; i <1000; i ++) {
html.push ('<p>' + i + '</p>');
}
document.body.innerhtml = html.join ('');
Akses dom
Setiap node dalam dokumen HTML dapat diakses melalui DOM. Setiap kali Anda menghubungi GetElementById (), GetElementsByTagname () dan metode lainnya, node akan disembunyikan dan diakses kembali. Oleh karena itu, cache node DOM yang ditemukan juga dapat meningkatkan kinerja JavaScript.
Salinan kode adalah sebagai berikut:
document.geteLementById ("p2"). style.color = "blue";
document.geteLementById ("p2"). style.fontFamily = "Arial";
document.geteLementById ("p2"). style.fontsize = "lebih besar";
Disarankan untuk berubah menjadi:
Salinan kode adalah sebagai berikut:
var elmt = document.geteLementById ("p2");
elmt.style.color = "biru";
elmt.style.fontfamily = "Arial";
elmt.style.fontsize = "lebih besar";
Dom Traversal
Dom Traversal Child Elements biasanya membaca elemen anak berikutnya dengan loop indeks. Di browser awal, metode membaca ini sangat efisien dalam eksekusi. Menggunakan metode NextSibling dapat meningkatkan efisiensi traversal DOM oleh JS.
Salinan kode adalah sebagai berikut:
var html = [];
var x = document.geteLementsbyTagname ("p"); // semua node
untuk (var i = 0; i <x.length; i ++) {
// todo
}
Disarankan untuk berubah menjadi:
Salinan kode adalah sebagai berikut:
var html = [];
var x = document.geteLementById ("div"); // node superior
var node = x.firstchild;
while (node! = null) {
// todo
node = node.nextsibling;
}
Rilis Memori JavaScript
Dalam aplikasi Web, seiring dengan meningkatnya jumlah objek DOM, konsumsi memori akan menjadi lebih besar dan lebih besar. Oleh karena itu, referensi ke objek harus dirilis tepat waktu sehingga browser dapat mendaur ulang memori ini.
Membebaskan ingatan yang ditempati oleh DOM
Salinan kode adalah sebagai berikut:
document.geteLementById ("test"). innerHtml = "";
Menetapkan bagian dalam elemen DOM ke string kosong dapat membebaskan memori yang ditempati oleh elemen anaknya.
Rilis Objek JavaScript
Salinan kode adalah sebagai berikut:
//Obyek:
OBJ = NULL
// properti objek:
Hapus obj.property
// elemen array:
arr.splice (0,3); // hapus 3 elemen pertama