Блог

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

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

 buttons.forEach((button) => {
  const area = document.querySelector(`#${button.getAttribute('aria-controls')}`);   
        
  button.addEventListener('click', (e) => {
    // do some things with "area" and "button"
  });
});
 

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

 document.addEventListener('click', (e) => {
   if(e.target.classList.contains("button-class")) {
      const area = document.querySelector(`#${e.target.getAttribute('aria-controls')}`);
      // do some things with "area" and "button"
   }
});
 

Но стоит ли ради этого идти на компромисс, что теперь каждый раз, когда нажимается кнопка, я должен снова запрашивать соответствующий элемент «область»? Меняется ли ответ в зависимости от того, сколько у меня кнопок или как часто они будут нажиматься? Есть ли какой-то третий ответ, который более оптимален, чем любое из моих решений? Приношу извинения, если это действительно очевидный и глупый вопрос, но я искал в Google и просматривал другие вопросы о переполнении стека и действительно не могу найти ничего, чтобы ответить на этот вопрос.

что дороже?

Как вы уже заметили, это компромисс. Затраты, которые вам нужно сравнить, соответственно

• время выполнения, затраченное на инициализацию
• время выполнения каждого обработчика щелчков
• память, необходимая для сохранения состояния

Для всего лишь нескольких кнопок, которые нажимаются в обычных веб-потоках (а не, скажем, в инструменте тестирования APM), это действительно не имеет значения.