Optimalisatie van DOM-manipulatie in JavaScript

DOM-manipulatie is een trage operatie. Daarom is het nodig om het ophalen van elementen, het lezen en schrijven van data tot een minimum te beperken, vooral in loops.

Laten we een voorbeeld bekijken. Stel we hebben een invoerveld waarin een getal wordt ingevoerd:

<input>

Laten we bij verlies van focus controleren of het ingevoerde getal binnen het opgegeven bereik valt:

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

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

Het probleem is dat we twee keer de tekst uit het invoerveld lezen, terwijl het getal erin niet verandert. Dit is uiteraard niet optimaal. Laten we optimaliseren:

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

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

De volgende code controleert de ingevoerde waarde. Voer optimalisatie uit:

<input>

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

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

De volgende code berekent de som van gehele getallen van één tot het in het invoerveld ingevoerde getal. Voer optimalisatie uit:

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

De volgende code zoekt de som van delers van het in het invoerveld ingevoerde getal. Voer optimalisatie uit:

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

De volgende code kwadrateert de getallen uit de alinea's. Voer optimalisatie uit:

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

De volgende code controleert of in het invoerveld een string van de opgegeven lengte is ingevoerd. Voer optimalisatie uit:

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