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

html<input>

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

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

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

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

Задание 1

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

html<input>

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

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

Задание 2

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

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

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

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

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

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

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 :

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