Pengoptimuman Pengendalian DOM dalam JavaScript

Pengendalian DOM adalah operasi yang perlahan. Oleh itu, kita perlu meminimumkan pengambilan elemen, pembacaan dan penulisan data, terutamanya dalam gelung.

Mari kita lihat contoh. Katakan kita mempunyai input, di mana nombor dimasukkan:

<input>

Mari kita semak, apabila input kehilangan fokus, sama ada nombor yang dimasukkan berada dalam julat yang ditetapkan:

let input = document.querySelector('input');

input.addEventListener('blur', function() {
	if (+input.value > 0 && +input.value <= 10) {
		console.log('+++');
	} else {
		console.log('---');
	}
});

Masalahnya ialah kita membaca teks dari input dua kali, walaupun nombor di dalamnya tidak berubah. Ini sudah tentu tidak optimum. Mari kita optimumkan:

let input = document.querySelector('input');

input.addEventListener('blur', function() {
	let num = +input.value;
	
	if (num > 0 && num <= 10) {
		console.log('+++');
	} else {
		console.log('---');
	}
});

Kod berikut menyemak nilai yang dimasukkan. Lakukan pengoptimuman:

<input>

let input = document.querySelector('input');

input.addEventListener('blur', function() {
	if (input.value === '1' || input.value === '2') {
		console.log('+++');
	} else {
		console.log('---');
	}
});

Kod berikut mencari jumlah integer dari satu hingga nombor yang dimasukkan ke dalam input. Lakukan pengoptimuman:

<input>

let input = document.querySelector('input');

input.addEventListener('blur', function() {
	let sum = 0;
	
	for (let i = 1; i <= +input.value; i++) {
		sum += i;
	}
	
	console.log(sum);
});

Kod berikut mencari jumlah pembahagi nombor yang dimasukkan ke dalam input. Lakukan pengoptimuman:

<input>
<div></div>

let input = document.querySelector('input');

input.addEventListener('blur', function() {
	let sum = 0;
	
	for (let i = 1; i <= +input.value; i++) {
		if (input.value % i === 0) {
			sum += i;
			
			let div = document.querySelector('div');
			div.textContent = sum;
		}
	}
});

Kod berikut memangkatkan nombor dari perenggan. Lakukan pengoptimuman:

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.textContent = elem.textContent * elem.textContent;
}

Kod berikut menyemak sama ada string yang dimasukkan ke dalam input mempunyai panjang dalam julat yang ditetapkan. Lakukan pengoptimuman:

<input data-min="5" data-max="10">

let inp = document.querySelector('input');

inp.addEventListener('blur', function() {
	if (inp.dataset.min > inp.value.length || inp.dataset.max < inp.value.length) {
		console.log('+++');
	} else {
		console.log('---');
	}
});