Optimierung der DOM-Manipulation in JavaScript

Die Arbeit mit dem DOM ist ein langsamer Vorgang. Daher sollte der Zugriff auf Elemente, das Lesen und Schreiben von Daten minimiert werden, besonders in Schleifen.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben ein Eingabefeld, in das eine Zahl eingegeben wird:

<input>

Lassen Sie uns beim Verlassen des Fokus prüfen, ob die eingegebene Zahl in einem bestimmten Bereich liegt:

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

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

Das Problem ist, dass wir den Text aus dem Eingabefeld zweimal lesen, obwohl sich die Zahl darin nicht ändert. Das ist natürlich nicht optimal. Optimieren wir es:

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

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

Der folgende Code prüft den eingegebenen Wert. Führen Sie eine Optimierung durch:

<input>

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

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

Der folgende Code berechnet die Summe der ganzen Zahlen von eins bis zur im Eingabefeld eingegebenen Zahl. Führen Sie eine Optimierung durch:

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

Der folgende Code berechnet die Summe der Teiler der im Eingabefeld eingegebenen Zahl. Führen Sie eine Optimierung durch:

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

Der folgende Code quadriert die Zahlen in den Absätzen. Führen Sie eine Optimierung durch:

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

Der folgende Code prüft, ob in das Eingabefeld eine Zeichenkette einer Länge im angegebenen Bereich eingegeben wurde. Führen Sie eine Optimierung durch:

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