Optimisation de la manipulation du DOM en JavaScript

La manipulation du DOM est une opération lente. Il est donc nécessaire de minimiser l'obtention d'éléments, la lecture et l'écriture des données, particulièrement dans une boucle.

Regardons un exemple. Supposons que nous ayons un champ de saisie dans lequel un nombre est entré :

<input>

Vérifions, lors de la perte de focus, que le nombre saisi se trouve dans une plage donnée :

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

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

Le problème est que nous lisons le texte de l'entrée deux fois, alors que le nombre qu'il contient ne change pas. Ce n'est, bien sûr, pas optimal. Optimisons :

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

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

Le code suivant vérifie la valeur saisie. Effectuez l'optimisation :

<input>

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

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

Le code suivant calcule la somme des entiers de un jusqu'au nombre saisi dans le champ. Effectuez l'optimisation :

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

Le code suivant calcule la somme des diviseurs du nombre saisi dans le champ. Effectuez l'optimisation :

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

Le code suivant élève au carré les nombres des paragraphes. Effectuez l'optimisation :

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

Le code suivant vérifie qu'une chaîne de longueur dans une plage donnée a été saisie dans le champ. Effectuez l'optimisation :

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