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:

html<input>

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

javascriptlet 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:

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

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

Задание 1

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

html<input>

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

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

Задание 2

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

html<input>

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

input.addEventListener('blur', function() {
  let sum = 0;
  
  for (let i = 1; i <= +input.value; i++) {
    sum += i;
  }
  
  console.log(sum);
});

Задание 3

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

html<input>
<div></div>

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

Задание 4

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

html<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>

javascriptlet elems = document.querySelectorAll('p');

for (let elem of elems) {
  elem.textContent = elem.textContent * elem.textContent;
}

Задание 5

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:

html<input data-min="5" data-max="10">

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