Penjelasan terperinci tentang contoh delegasi acara untuk pengoptimuman prestasi javascript

Artikel ini menganalisis delegasi acara pengoptimuman prestasi JavaScript melalui contoh. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Ikat acara klik untuk setiap LI di bawah

Go somewhereDo somethingSay hi

1. Penulisan tradisional

var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3=document.getElementById("sayHi");
item1.onclick = function(){
  console.log('goSomewhere');
}
item2.onclick = function(){
  console.log('doSomething');
}
item3.onclick = function(){
  alert("hello");
}

Dalam JavaScript, bilangan pengendali acara yang ditambahkan pada halaman akan dikaitkan secara langsung dengan prestasi keseluruhan halaman yang dijalankan prestasi.

Terdapat banyak sebab:

1 Setiap fungsi adalah objek dan akan menduduki memori, semakin teruk prestasinya.
2. Bilangan akses DOM yang disebabkan oleh perlunya menentukan semua pengendali acara terlebih dahulu akan melambatkan masa kesediaan interaktif seluruh halaman.

2. Delegasi acara

Penyelesaian masalah "terlalu ramai pengendali acara" ialah delegasi acara.

Delegasi acara menggunakan acara menggelegak untuk mengurus semua acara jenis tertentu dengan menyatakan hanya satu pengendali acara. Contohnya: peristiwa klik akan menggelembung sehingga ke peringkat dokumen. Iaitu, kita boleh menentukan pengendali acara onclick untuk keseluruhan halaman tanpa perlu menambah pengendali acara untuk setiap elemen yang boleh diklik.

Kaedah delegasi acara:

var list=document.getElementById("myLinks");
list.onclick = function(e){
  var target = e.target;  
  switch(target.id){
   case "goSomewhere":
    console.log('goSomewhere');
    break; 
   case "doSomething":
    console.log('doSomething');
    break; 
   case "sayHi":
    alert("hello");
    break; 
  }
}

3. Kelebihan menggunakan delegasi acara:

1) Objek dokumen boleh diakses dengan cepat dan pengendali acara boleh ditambahkan padanya pada bila-bila masa dalam kitaran hayat halaman (tanpa menunggu DOMContentLoaded atau memuatkan acara). Dalam erti kata lain, sebaik sahaja elemen yang boleh diklik dipaparkan pada halaman, ia berfungsi serta-merta.

2) Kurang masa diperlukan untuk menyediakan pengendali acara dalam halaman. Menambah hanya satu pengendali acara memerlukan lebih sedikit rujukan DOM dan mengambil masa yang lebih singkat.

3) Seluruh halaman menggunakan lebih sedikit ruang memori, yang boleh meningkatkan prestasi keseluruhan.

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

【Tutorial berkaitan yang disyorkan】

1 Tutorial video JavaScript
2 Manual dalam talian JavaScript
3 tutorial bootstrap