მოვლენების დამმუშავებლების ოპტიმიზაცია JavaScript-ში

ელემენტებზე ჩატვირთული დამმუშავებლების ზედმეტად დიდი რაოდენობა იწვევს ოპერატიული მეხსიერების დიდ მოხმარებას და გვერდის დაფრივებას.

მოდით შევხედოთ მაგალითს. დავუშვათ, გვაქვს გარკვეული სია:

<ul></ul>

მოდით მივიღოთ მითითება ამ სიაზე ცვლადში:

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

ახლა შევავსოთ ჩვენი სია li თეგებით, და დავამატოთ მათზე დაწკაპუნების დამმუშავებელი:

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

შედეგად მივიღეთ, რომ ჩვენ გვაქვს 1000 დამმუშავებელი. ეს ძალიან ბევრია. ოპტიმიზაციისთვის ჩვენ შეგვიძლია მხოლოდ ერთი დამმუშავებელი დავამატოთ ul თეგზე, გამოვიყენოთ დელეგირება.

მოდით გავაკეთოთ ეს. ჯერ უბრალოდ შევქმნათ სიის ელემენტები:

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

ახლა კი შევასრულოთ მოვლენების დელეგირება დამმუშავებლის მეშვეობით:

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

შექმენით HTML ცხრილი ზომით 100 ზე 100. გახადეთ ისე, რომ თითოეული უჯრედი დაწკაპუნებისას გაწითლდეს.