Оптимизация событий (events) в JavaScript, Debouncing и Throttling кратко

События (events) в JavaScript играют важную роль в создании динамических и интерактивных веб-страниц. Они позволяют выполнять определенные действия в ответ на пользовательские действия или другие события на веб-странице. Вот основные концепции и примеры работы с событиями в JavaScript:

Типы событий в JavaScript

• События мыши:click - клик мышью.dblclick - двойной клик.mouseover - наведение курсора мыши.mouseout - уход курсора мыши.mousedown - нажатие кнопки мыши.mouseup - отпускание кнопки мыши.
• События клавиатуры:keydown - нажатие клавиши.keyup - отпускание клавиши.keypress - нажатие клавиши (устаревшее, рекомендуется использовать keydown или keyup).
• События формы:submit - отправка формы.change - изменение значения элемента формы.focus - получение фокуса.blur - потеря фокуса.
• События документа:DOMContentLoaded - полная загрузка HTML-документа и построение DOM.load - полная загрузка всех ресурсов страницы (включая изображения, стили и т.д.).resize - изменение размера окна.scroll - прокрутка страницы.

Оптимизация событий (events)

Оптимизация событий (events) в JavaScript важна для повышения производительности приложений, особенно при работе с большим количеством событий и элементов DOM.

Вот несколько ключевых стратегий и подходов оптимизации:

1. Debouncing ( дебоунсинг ,Устранение дребезга ) и Throttling ( троттлинг , понижение частоты)

Эти техники помогают снизить количество вызовов функций-обработчиков, которые могут выполняться слишком часто (например, при событиях scroll, resize или input).

• Debouncing: Запускает функцию только после завершения серии вызовов события. Например, для resize окно браузера:

function debounce(func, delay)
{ 
  let timer; 
   return function (...args) {
     clearTimeout(timer); timer = setTimeout(() => func.apply(this, args), delay); 
   }; 
} 

window.addEventListener('resize', debounce(() => { console.log('Window resized!'); }, 300)); 

• Throttling: Ограничивает частоту выполнения функции. Например, при прокрутке:

function throttle(func, limit)
{ let lastCall = 0; 
return function (...args) {
    const now = Date.now();
   if (now - lastCall >= limit) { lastCall = now; func.apply(this, args); } 
  }; 
} 

window.addEventListener('scroll', throttle(() => { console.log('Scrolling...'); }, 200)); 

2. Делегирование событий

Вместо привязки событий к каждому элементу DOM, можно использовать делегирование через ближайшего общего родителя.

Пример: клик по элементам списка:

document.querySelector('#list').addEventListener('click', (event) => 
{
  if (event.target && event.target.tagName === 'LI') { console.log('Clicked:', event.target.textContent); }
}); 

3. Удаление ненужных обработчиков

Удаляйте обработчики событий, когда они больше не нужны:

function handleClick() 
{ 
console.log('Button clicked'); 
} 

const button = document.querySelector('button'); 

button.addEventListener('click', handleClick); 

// Позже удаляем обработчик
 button.removeEventListener('click', handleClick); 

4. Использование passive: true

Для событий, таких как scroll и touchstart, включение флага passive может улучшить производительность:

window.addEventListener('scroll', () => { console.log('Scrolling...'); }, { passive: true }); 

Это позволяет браузеру не блокировать прокрутку, улучшая отзывчивость.

5. Минимизация DOM-операций

Не изменяйте DOM внутри каждого вызова события. Вместо этого:

• Используйте фрагменты DOM или временные переменные.
• Применяйте изменения в DOM пачками.

Пример:

const fragment = document.createDocumentFragment();
 for (let i = 0; i < 100; i++) 
{ 
  const item = document.createElement('div'); 
  item.textContent = `Item ${i}`; 
  fragment.appendChild(item); 
}
 document.querySelector('#container').appendChild(fragment); 

6. Использование одного обработчика на одно событие

Старайтесь избегать добавления нескольких обработчиков на одно событие. Например, вместо:

button.addEventListener('click', () => console.log('Handler 1'));
button.addEventListener('click', () => console.log('Handler 2')); 

Лучше объединить логику:

button.addEventListener('click', () => { console.log('Handler 1'); console.log('Handler 2'); }); 

7. Использование once: true для одноразовых событий

Если событие нужно обработать только один раз:

button.addEventListener('click', () => { console.log('Button clicked once!'); }, { once: true }); 

8. Обработка событий в Web Workers (для тяжелых задач)

Для ресурсоемких вычислений перенесите обработку в Web Worker:

const worker = new Worker('worker.js');
worker.postMessage({ type: 'heavyTask' });
worker.onmessage = (event) => { console.log('Result from worker:', event.data); }; 

Применение этих подходов позволяет минимизировать нагрузку на браузер, улучшить отклик интерфейса и сделать приложение более плавным и удобным.