DOM darbības optimizēšana JavaScript

Darbības ar DOM ir lēna operācija. Tāpēc ir jāsamazina elementu iegūšana, datu lasīšana un rakstīšana, īpaši cilpā.

Apskatīsim piemērā. Pieņemsim, ka mums ir ievades lauks, kurā tiek ievadīts skaitlis:

html<input>

Pēc fokusa zaudēšanas pārbaudīsim, ka ievadītais skaitlis atrodas noteiktā diapazonā:

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

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

Problēma ir tā, ka mēs divas reizes nolasām tekstu no ievades lauka, lai gan skaitlis tajā nemainās. Tas, protams, nav optimāli. Optimizēsim:

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

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

Задание 1

Šis kods pārbauda ievadīto vērtību. Veiciet optimizāciju:

html<input>

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

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

Задание 2

Šis kods meklē veselu skaitļu summu no viena līdz ievadītajam skaitlim ievades laukā. Veiciet optimizāciju:

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

Šis kods meklē ievadītā skaitļa dalītāju summu. Veiciet optimizāciju:

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

Šis kods paceļ skaitļus no rindkopām kvadrātā. Veiciet optimizāciju:

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

Šis kods pārbauda, vai ievades laukā ir ievadīta virkne ar garumu noteiktā diapazonā. Veiciet optimizāciju:

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