Optimasi Bekerja dengan DOM di JavaScript

Bekerja dengan DOM adalah operasi yang lambat. Oleh karena itu, perlu diminimalkan pengambilan elemen, pembacaan dan penulisan data, terutama dalam loop.

Mari kita lihat contohnya. Misalkan kita memiliki input, di mana sebuah angka dimasukkan:

<input>

Mari kita periksa saat kehilangan fokus, apakah angka yang dimasukkan berada dalam rentang yang ditentukan:

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

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

Masalahnya adalah kita membaca teks dari input dua kali, meskipun angka di dalamnya tidak berubah. Ini, tentu saja, tidak optimal. Mari kita optimalkan:

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

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

Kode berikut memeriksa nilai yang dimasukkan. Lakukan optimasi:

<input>

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

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

Kode berikut mencari jumlah bilangan bulat dari satu hingga angka yang dimasukkan ke dalam input. Lakukan optimasi:

<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);
});

Kode berikut mencari jumlah pembagi dari angka yang dimasukkan ke dalam input. Lakukan optimasi:

<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;
		}
	}
});

Kode berikut mengkuadratkan angka dari paragraf. Lakukan optimasi:

<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;
}

Kode berikut memeriksa apakah string yang dimasukkan ke dalam input panjangnya berada dalam rentang yang ditentukan. Lakukan optimasi:

<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('---');
	}
});