DOM darbības optimizēšana JavaScript

Darbības ar DOM ir lēna operācija. Tāpēc ir jāsamazina elementu iegūšana, datu lasīšana un rakstīšana, īpaši cilpā.

Apskatīsim piemērā. Pieņemsim, ka mums ir ievades lauks, kurā tiek ievadīts skaitlis:

<input>

Pēc fokusa zaudēšanas pārbaudīsim, ka ievadītais skaitlis atrodas noteiktā diapazonā:

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

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

Problēma ir tā, ka mēs divas reizes nolasām tekstu no ievades lauka, lai gan skaitlis tajā nemainās. Tas, protams, nav optimāli. Optimizēsim:

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

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

Šis kods pārbauda ievadīto vērtību. Veiciet optimizāciju:

<input>

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

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

Šis kods meklē veselu skaitļu summu no viena līdz ievadītajam skaitlim ievades laukā. Veiciet optimizāciju:

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

Šis kods meklē ievadītā skaitļa dalītāju summu. Veiciet optimizāciju:

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

Šis kods paceļ skaitļus no rindkopām kvadrātā. Veiciet optimizāciju:

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

Šis kods pārbauda, vai ievades laukā ir ievadīta virkne ar garumu noteiktā diapazonā. Veiciet optimizāciju:

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