Beberapa pengetahuan untuk meningkatkan kecekapan pelaksanaan JavaScript_kemahiran javascript dengan berkesan

Untuk memberikan pengalaman pengguna yang segar dan unik, banyak tapak web menggunakan JavaScript untuk menambah baik reka bentuk, mengesahkan borang, menyemak penyemak imbas, permintaan Ajax, operasi kuki, dsb., untuk mencapai kesan dinamik tanpa menyegarkan. Walau bagaimanapun, sejumlah besar kandungan perlu dipaparkan dalam penyemak imbas, dan jika ia tidak dikendalikan dengan betul, prestasi tapak web akan menurun dengan ketara. Jadi kita perlu memahami cara untuk meningkatkan kecekapan pelaksanaan JavaScript.

Fungsi JavaScript

Dalam JavaScript, fungsi disusun sebelum digunakan. Walaupun kadangkala rentetan boleh digunakan dan bukannya fungsi, kod JavaScript ini akan dihuraikan semula setiap kali ia dilaksanakan, menjejaskan prestasi.

1. contoh eval

Salin kod Kod adalah seperti berikut:

eval('output=(input * input)');
// Adalah disyorkan untuk menukarnya kepada:
eval(fungsi baharu() { output=(input * input)});

2. contoh setMasa

Salin kod Kod adalah seperti berikut:

setTimeout("alert(1)", 1000);
// Adalah disyorkan untuk menukarnya kepada:
setTimeout(function(){alert(1)}, 1000);

Menggunakan fungsi dan bukannya rentetan sebagai parameter memastikan kod dalam kaedah baharu boleh dioptimumkan oleh pengkompil JavaScript.

Skop JavaScript

Setiap skop dalam rantaian skop JavaScript mengandungi beberapa pembolehubah. Adalah penting untuk memahami rantaian skop untuk memanfaatkannya.

Salin kod Kod adalah seperti berikut:

var localVar = "global"; //Pembolehubah global

ujian fungsi() {

var localVar = "local"; //pembolehubah setempat

//Pembolehubah setempat
alert(localVar);

//Pembolehubah global
alert(this.localVar);

//Jika dokumen tidak ditemui dalam pembolehubah tempatan, cari pembolehubah global
var pageName = document.getElementById("pageName"); }

Menggunakan pembolehubah tempatan adalah lebih pantas daripada menggunakan pembolehubah global kerana peleraian lebih perlahan apabila anda melangkah lebih jauh dalam rantaian skop. Rajah berikut menunjukkan struktur rantai skop:

Jika terdapat pernyataan dengan atau cuba-tangkap dalam kod, rantai skop akan menjadi lebih rumit, seperti yang ditunjukkan di bawah:

Rentetan JavaScript

Fungsi dalam JavaScript yang sangat mempengaruhi prestasi ialah penggabungan rentetan Secara umumnya, simbol digunakan untuk menyambung rentetan. Walau bagaimanapun, penyemak imbas awal tidak mengoptimumkan kaedah sambungan ini, yang mengakibatkan penciptaan berterusan dan pemusnahan rentetan secara serius mengurangkan kecekapan pelaksanaan JavaScript.

Salin kod Kod adalah seperti berikut:

var txt = "hello" " " "dunia";

Adalah disyorkan untuk menukarnya kepada:

Salin kod Kod adalah seperti berikut:

var o = [];
o.push("hello");
o.push(" ");
o.push("dunia");
var txt = o.join();

Mari kita rangkumkannya secara ringkas:

Salin kod Kod adalah seperti berikut:

fungsi StringBuffer(str) {
var arr = [];
arr.push(str || "");
This.append = function(str) {
arr.push(str);
         kembalikan ini;
};
This.toString = function() {
          return arr.join("");
};
};

Kemudian panggilnya seperti ini:

Salin kod Kod adalah seperti berikut:

var txt = new StringBuffer();
txt.append("Hello");
txt.append(" ");
txt.append("Dunia");
alert(txt.toString());

Manipulasi DOM JavaScript

Model Objek Dokumen HTML (DOM) mentakrifkan cara standard untuk mengakses dan memanipulasi dokumen HTML. Ia mewakili dokumen HTML sebagai pepohon nod yang mengandungi elemen, atribut dan kandungan teks. Dengan menggunakan HTML DOM, JavaScript boleh mengakses semua nod dalam dokumen HTML dan memanipulasinya.

lukis semula DOM

Setiap kali objek DOM halaman diubah suai, ia melibatkan lukisan semula DOM dan penyemak imbas akan memaparkan semula halaman tersebut. Oleh itu, mengurangkan bilangan pengubahsuaian objek DOM boleh meningkatkan prestasi JavaScript dengan berkesan.

Salin kod Kod adalah seperti berikut:

untuk (var i = 0; i < 1000; i ) {
var elmt = document.createElement('p');
elmt.innerHTML = i;
document.body.appendChild(elmt);
}

Adalah disyorkan untuk menukarnya kepada:

Salin kod Kod adalah seperti berikut:

var html = [];
untuk (var i = 0; i < 1000; i ) {
html.push('

' i '

');
}
document.body.innerHTML = html.join('');

Akses DOM

Setiap nod dalam dokumen HTML boleh diakses melalui DOM. Setiap kali anda memanggil getElementById(), getElementsByTagName() dan kaedah lain, nod akan dicari dan diakses semula. Oleh itu, caching nod DOM yang ditemui juga boleh meningkatkan prestasi JavaScript.

Salin kod Kod adalah seperti berikut:

document.getElementById("p2").style.color = "biru";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "lebih besar";

Adalah disyorkan untuk menukarnya kepada:

Salin kod Kod adalah seperti berikut:

var elmt = document.getElementById("p2");
elmt.style.color = "biru";
elmt.style.fontFamily = "Arial";
elmt.style.fontSize = "lebih besar";

Perjalanan DOM

Perjalanan DOM bagi elemen kanak-kanak biasanya membaca elemen anak seterusnya dalam gelung mengikut indeks Dalam penyemak imbas awal, kaedah bacaan ini mempunyai kecekapan pelaksanaan yang sangat rendah. Kaedah nextSibling boleh digunakan untuk meningkatkan kecekapan js melintasi DOM.

Salin kod Kod adalah seperti berikut:

var html = [];
var x = document.getElementsByTagName("p");//Semua nod
untuk (var i = 0; i < x.panjang; i ) {
//todo
}

Adalah disyorkan untuk menukarnya kepada:

Salin kod Kod adalah seperti berikut:

var html = [];
var x = document.getElementById("div");//Nod unggul
var nod = x.firstChild;
while(nod ​​!= null){
//todo
nod = node.nextSibling;
}

Keluaran memori JavaScript

Dalam aplikasi web, apabila bilangan objek DOM bertambah, penggunaan memori akan menjadi lebih besar dan lebih besar. Oleh itu, rujukan kepada objek harus dikeluarkan dalam masa supaya penyemak imbas boleh menuntut semula memori.

Lepaskan memori yang diduduki oleh DOM

Salin kod Kod adalah seperti berikut:

document.getElementById("test").innerHTML = "";

Tetapkan innerHTML elemen DOM kepada rentetan kosong untuk melepaskan memori yang diduduki oleh elemen anaknya.

Lepaskan objek javascript

Salin kod Kod adalah seperti berikut:

//Objek:
obj = batal
//Sifat objek:
padamkan obj.property
//Elemen tatasusunan:
arr.splice(0,3);//Padamkan 3 elemen pertama