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:

html<input>

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

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

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

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

Задание 1

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

html<input>

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

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

Задание 2

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

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

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

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

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

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

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

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