Optimasi Bekerja dengan DOM di JavaScript

Bekerja dengan DOM adalah operasi yang lambat. Oleh karena itu, perlu diminimalkan pengambilan elemen, pembacaan dan penulisan data, terutama dalam loop.

Mari kita lihat contohnya. Misalkan kita memiliki input, di mana sebuah angka dimasukkan:

html<input>

Mari kita periksa saat kehilangan fokus, apakah angka yang dimasukkan berada dalam rentang yang ditentukan:

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

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

Masalahnya adalah kita membaca teks dari input dua kali, meskipun angka di dalamnya tidak berubah. Ini, tentu saja, tidak optimal. Mari kita optimalkan:

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

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

Задание 1

Kode berikut memeriksa nilai yang dimasukkan. Lakukan optimasi:

html<input>

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

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

Задание 2

Kode berikut mencari jumlah bilangan bulat dari satu hingga angka yang dimasukkan ke dalam input. Lakukan optimasi:

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

Kode berikut mencari jumlah pembagi dari angka yang dimasukkan ke dalam input. Lakukan optimasi:

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

Kode berikut mengkuadratkan angka dari paragraf. Lakukan optimasi:

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

Kode berikut memeriksa apakah string yang dimasukkan ke dalam input panjangnya berada dalam rentang yang ditentukan. Lakukan optimasi:

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