Pemahaman mendalam tentang masalah memori dan kinerja JavaScript

Cara cepat memulai VUE3.0: Masukkan

Rekomendasi Terkait Pembelajaran: Tutorial JavaScript

1. Apa yang dimaksud dengan Memori dan Kinerja JavaScript? Karena

event handler dapat berinteraksi dalam aplikasi web modern, banyak pengembang yang secara keliru menggunakan sejumlah besar dari mereka di halaman. Dalam JavaScript, jumlah event handler pada suatu halaman berhubungan langsung dengan kinerja halaman secara keseluruhan. Ada banyak alasan, seperti ① setiap fungsi adalah sebuah objek dan memakan ruang memori. Semakin banyak objek, semakin buruk kinerjanya ② Jumlah kunjungan DOM yang diperlukan untuk event handler tertentu akan menyebabkan penundaan secara keseluruhan interaksi halaman.

2. Bicara tentang masalah kinerja innerHTML?

1. Gunakan bahan ajar negatif innerHTML

untuk (biarkan nilai dari nilai) {
	ul.innerHTML += '<li>${value}</li>';}

Kode ini tidak efisien karena innerHTML harus disetel satu kali untuk setiap iterasi. Tidak hanya itu, innerHTML harus dibaca terlebih dahulu untuk setiap loop, dan Yaitu dengan kata lain, innerHTML perlu diakses dua kali dalam satu putaran.

2. Cara mengatasi

let itemsHtml = "";for(let value of value){
	itemsHtml += '<li>${value}</li>';}ul.innerHTML = itemsHtml;

Setelah modifikasi ini, efisiensinya akan jauh lebih tinggi. Hanya innerHTML yang akan diberi nilai :
ul.innerHTML = values.map(value => '<li>${value}</li>').join(' ');

3. Bagaimana cara mengatasi masalah terlalu banyak tombol?

Solusi untuk terlalu banyak event handler adalah dengan menggunakan delegasi event. Delegasi acara memanfaatkan penggelembungan acara, memungkinkan Anda menggunakan hanya satu pengendali acara untuk mengelola satu jenis acara. Misalnya, peristiwa klik muncul di dokumen. Ini berarti Anda dapat menentukan event handler onclick untuk seluruh halaman, daripada menentukan event handler terpisah untuk setiap elemen yang dapat diklik.

<ul id="gadisku">
	<li id="girl1">Bibi Dong</li>
	<li id="girl2">Yun Yun</li>
	<li id="girl3">Medusa</li></ul>

Ini berisi tiga item daftar yang harus melakukan tindakan tertentu ketika diklik. Cara yang biasa adalah dengan menentukan tiga event handler:

let item1 = document.getElementById("girl1 ");biarkan item2 = document.getElementById("girl2");biarkan item3 = document.getElementById("girl3");item1.addEventListener("klik",(acara) => {
	console.log("Saya Bibi Dong!");})item2.addEventListener("klik",(acara) => {
	console.log("Saya Yunyun!");})item3.addEventListener("klik",(event) => {
	console.log("Saya Medusa!");})

Ada terlalu banyak kode yang identik dan kodenya terlalu jelek.
Dengan menggunakan delegasi peristiwa, cukup tambahkan pengendali peristiwa ke simpul leluhur bersama dari beberapa elemen dan Anda dapat mengatasi keburukannya!

biarkan daftar = document.getElementById("myGirls");list.addEventListener("klik",(acara) => {
	biarkan target = acara.target;
	beralih(target.id){
		kasus "gadis1":
			console.log("Saya Bibi Dong!");
			merusak;
		kasus "gadis2":
			console.log("Saya Yunyun!");
			merusak;
		kasus "gadis3":
			console.log("Saya Medusa!");
			merusak;
	}})

4. Apa keuntungan delegasi acara?

• Objek dokumen tersedia kapan saja, dan Anda dapat menambahkan pengendali peristiwa ke dalamnya kapan saja (tanpa menunggu DOMContentLoaded atau memuat peristiwa), dan menggunakannya untuk menangani semua peristiwa jenis tertentu di halaman. Artinya, selama laman menampilkan elemen yang dapat diklik, laman akan berfungsi tanpa penundaan.

• Menghemat waktu yang dihabiskan untuk menyiapkan rutinitas acara halaman.

• Kurangi memori yang diperlukan untuk seluruh halaman dan tingkatkan kinerja secara keseluruhan.

5. Hapus event handler

Dengan menugaskan event handler ke elemen, koneksi dibuat antara kode browser dan kode JavaScript yang bertanggung jawab untuk interaksi halaman. Semakin banyak kontak yang dilanjutkan, semakin buruk kinerja halamannya. Selain membatasi koneksi tersebut melalui delegasi acara, event handler yang tidak digunakan harus segera dihapus. Buruknya kinerja banyak aplikasi web disebabkan oleh event handler yang tidak berguna yang tersisa di memori.
Ada dua alasan untuk masalah ini:

1. Menghapus elemen dengan event handler,

seperti menghapus node melalui metode DOM deleteChild() atau replaceChild(). Cara yang paling umum adalah menggunakan innerHTML untuk mengganti bagian tertentu dari halaman secara keseluruhan. Saat ini, jika ada event handler pada elemen yang dihapus oleh innerHTML, elemen tersebut tidak akan dibersihkan secara normal oleh program pengumpulan sampah.
Oleh karena itu, jika Anda mengetahui bahwa suatu elemen akan dihapus, Anda harus menghapus event handlernya secara manual, seperti btn.onclick = null;//删除事件处理程序. Delegasi event juga dapat membantu menyelesaikan masalah ini diganti dengan innerHTML, jangan tambahkan event handler ke elemen, cukup tambahkan ke node tingkat yang lebih tinggi.

2. Pembongkaran halaman juga dapat menyebabkan masalah referensi sisa di memori.

Jika event handler tidak dibersihkan setelah halaman dibongkar, maka referensi tersebut akan tetap ada di memori. Setelah itu, setiap kali browser memuat dan membongkar halaman (seperti maju, mundur, atau menyegarkan), jumlah objek sisa di memori bertambah karena pengendali kejadian tidak didaur ulang.
Secara umum, yang terbaik adalah menghapus semua event handler di event handler onunload sebelum halaman dibongkar. Keuntungan delegasi event juga terlihat saat ini. Karena jumlah event handlernya sedikit, maka mudah untuk mengingat mana yang harus dihapus.

6. Bagaimana cara mengatasi masalah loop tak terbatas yang disebabkan oleh penambahan p secara dinamis dalam loop?

Ekspresi

let ps = document.getElementsByTagName("p");for(let i = 0;i<ps.length;++i){
	biarkan p = document.createElement("p");
	document.body.appendChild(p);}

Ekspresi

let ps = document.getElementsByTagName("p");for(let i = 0,len=ps.length;i<len;++i){
	biarkan p = document.createElement("p");
	document.body.appendChild(p);}

Baris pertama dalam ekspresi ① memperoleh HTMLCollection yang berisi semua elemen <p> dalam dokumen. Karena koleksi ini bersifat real-time, setiap kali Anda menambahkan elemen <p> baru ke halaman, lalu menanyakan koleksi ini, akan ada satu item lagi. Karena browser tidak ingin menyimpan koleksi setiap kali dibuat, maka browser akan memperbarui koleksi tersebut pada setiap kunjungan. Setiap loop akan mengevaluasi i < ps.length , yang berarti kueri untuk mendapatkan semua elemen <p> . Karena elemen <p> baru dibuat dan ditambahkan ke dokumen di dalam badan perulangan, nilai ps.length juga akan bertambah setiap kali melalui perulangan. Karena kedua nilai akan bertambah, i tidak akan pernah sama dengan ps.length , sehingga ekspresi ① akan menyebabkan loop tak terbatas.
Dalam ekspresi ②, variabel len yang menampung panjang himpunan diinisialisasi, karena len menampung panjang himpunan di awal perulangan, dan nilai ini tidak akan bertambah secara dinamis seiring bertambahnya himpunan ( for循环中初始化变量处只会初始化一次) , sehingga masalah loop tak terbatas yang muncul pada ekspresi ① dapat dihindari.
Jika Anda tidak ingin menginisialisasi variabel, Anda juga dapat menggunakan iterasi terbalik:

ekspresi

let ps = document.getElementsByTagName("p");for(let i = ps.length-1;i>=0;--i ){
	biarkan p = document.createElement("p");
	document.body.appendChild(p);}

7. Peta pikiran JavaScript

Rekomendasi terkait: Tutorial JavaScript

Di atas adalah pemahaman mendalam tentang masalah memori dan kinerja JavaScript. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di situs web PHP Cina!