JavaScript-daky wakalar prosesleýjilerini optimizasiýa etmek

Elementlere goýlan has köp prosesleýji, köp operativ ýatlygy sarp edýär we sahypanyň ýawaşlamagyna getirýär.

Mysal üçin göz aýlanyň. Bizde käbir sanaw bardyr diýeliň:

<ul></ul>

Bu sanawa çykgytly salgyny üýtgeýjide alalyň:

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

Indi sanawymyzy li tegleri bilen dolduryň, we olara çykmak prosesleýjisini goýuň:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
	
	li.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

Netijede bizde 1000 prosesleýji bar. Bu örän köp. Optimizasiýa üçin biz diňe bir prosesleýjini ul tege goýup, delegasiýadan peýdalanyp bileris.

Geliň muny edeliň. Ilki bilen sanaw maddalaryny dörediň:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
}

Indi bolsa waka prosesleýjisini delegasiýa edeliň:

ul.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		console.log(li.textContent);
	}
});

Ölçegi 100 bolan HTML tablisany dörediň. Her bir öýjik çyklanylanda gyzyl reňke öwrülmelidir.