Analisis contoh operasi interaktif DOM untuk kemahiran pengoptimuman_javascript prestasi javascript

Contoh dalam artikel ini menerangkan teknik operasi interaktif DOM untuk pengoptimuman prestasi javascript. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Dalam semua aspek JavaScript, DOM sudah pasti adalah bahagian yang paling perlahan. Manipulasi dan interaksi DOM mengambil banyak masa kerana selalunya memerlukan pemaparan semula keseluruhan halaman atau bahagian tertentu. Memahami cara mengoptimumkan interaksi dengan DOM boleh meningkatkan kelajuan penyiapan skrip.

1. Minimumkan kemas kini DOM

Lihat contoh di bawah:

var list = document.getElementById("ul");
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  list.appendChild(item);
}
//这段代码为列表添加10个项目。添加每个项目时，都有两次DOM更新。总共需要20次DOM更新。

Kami boleh menggunakan pemecahan dokumen untuk meminimumkan kemas kini DOM.

var list = document.getElementById("ul");
var fragment = document.createDocumentFragment();
for (var i=0; i < 10; i++){
  var item = document.createELement("li");
  item.appendChild(document.createTextNode("item" + i));
  fragment.appendChild(item);
}
list.appendChild(fragment);

Untuk mendapatkan maklumat lanjut tentang pemecahan dokumen, sila lihat artikel sebelumnya "Analisis contoh operasi pemecahan dokumen JavaScript"

2. Gunakan innerHTML

Untuk perubahan DOM yang lebih besar, menggunakan innerHTML adalah lebih pantas daripada createElement() dan appendChild().

var list = document.getElementById("ul");
var html = "";
for (var i=0; i < 10; i++){
  html += "<li>item" + i + "<li>";
}
list.innerHTML = html;

3. Gunakan delegasi acara

Untuk butiran, sila rujuk artikel sebelumnya "Penjelasan terperinci kejadian delegasi acara untuk pengoptimuman prestasi javascript"

4. Perhatikan NodeList

Meminimumkan bilangan akses kepada NodeList boleh meningkatkan prestasi skrip, kerana setiap kali NodeList diakses, pertanyaan berasaskan dokumen akan dijalankan.

var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
  var image = imgs[i];
  //more code
}
//这里的关键是长度length存入了len变量，而不是每次都去访问NodeList的length属性。当在循环中使用NodeList的时候，把imgs[i]放入image变量中，以避免在循环体内多次调用NodeList;

Untuk mendapatkan maklumat lanjut tentang NodeList, sila lihat artikel sebelumnya "Cara memproses NodeList sebagai tatasusunan Array dalam javascript"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.