JavaScript'te DOM İşlemlerini Optimize Etme

DOM ile çalışmak yavaş bir işlemdir. Bu nedenle, özellikle döngü içinde öğeleri alma, veri okuma ve yazma işlemlerini en aza indirmek gerekir.

Bir örnekle inceleyelim. Bir sayı girilen bir giriş kutumuz olsun:

<input>

Odak kaybedildiğinde, girilen sayının belirli bir aralıkta olup olmadığını kontrol edelim:

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

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

Sorun şu ki, içindeki sayı değişmese bile giriş kutusundaki metni iki kez okuyoruz. Bu elbette optimal değil. Optimize edelim:

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

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

Aşağıdaki kod, girilen değeri kontrol ediyor. Optimizasyonu gerçekleştirin:

<input>

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

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

Aşağıdaki kod, giriş kutusuna girilen sayıya kadar olan tam sayıların toplamını buluyor. Optimizasyonu gerçekleştirin:

<input>

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

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

Aşağıdaki kod, giriş kutusuna girilen sayının bölenlerinin toplamını buluyor. Optimizasyonu gerçekleştirin:

<input>
<div></div>

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

Aşağıdaki kod, paragraflardaki sayıların karesini alıyor. Optimizasyonu gerçekleştirin:

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

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

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

Aşağıdaki kod, giriş kutusuna belirli bir aralıkta uzunluğa sahip bir dizi girilip girilmediğini kontrol ediyor. Optimizasyonu gerçekleştirin:

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

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