Задать вопрос
@Kirill-Gorelov
С ума с IT

Js какой код производительнее?

Немного предыстории, вчера задал вопрос по клику по классу на js.
https://qna.habr.com/q/1196250

Мой вопрос пометили "дублирующим". И я увидел и потом еще нашел несколько способов клику по классу на JS. И теперь возник вопрос, а какой из вариантов будет более производительнее?

Вот мой вариант
function initBtnCreateTest() {
    const btn = document.getElementsByClassName("create");
    for (var i = 0; i < btn.length; i++) {
    var l = btn[i];
    l.addEventListener('click', function () {
        //code
    })
}


Из аналогичного вопроса у видел еще такие примеры
document.addEventListener('click', function(e){
   if (e.target.classList.contains('element')){
         // your code
   }
})


function foo(elem, eventType, selector, handler) {
  elem.addEventListener(eventType, function(evt) {
    if (evt.target.matches(selector)) {
      handler(evt)
    }
  })
}


И нашел еще такой.
document.querySelectorAll('a').forEach(occurence => {
  occurence.addEventListener('click', (e) => {
    console.log('A link was clicked');
  });
});


Вариантов несколько, но вопрос, какой из них будет производительнее и как это измерить. Я знаю, что есть performance у браузера, но как из него понять, какой из вариантов производительнее, не понимаю....
  • Вопрос задан
  • 146 просмотров
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 3
1й вариант - очень многословный. Не говоря даже о том, что в коде ошибка (не хватает })
2й вариант - навешиваем хендлер на все элементы, а фильтруемся уже внутри хендлера
3й вариант - как 1й, но более читабельный.

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

Аналогично при сравнении 1 и 3.

Я бы не стал задумываться о том, какой из них действительно более производительный, пока не столкнулся бы с проблемой, а она врядли произойдёт.
Используйте то, что удобнее и читабельнее в конкретной ситуации.
Ответ написан
Комментировать
Adamos
@Adamos
Вопрос производительности тут не стоит вообще, заметить разницу в этих примерах не в человеческих силах.
Вопрос в подходе и масштабировании: если у тебя 100500 элементов, на которые нужно повесить обработчики, тогда и решается стратегия навешивания: либо на весь документ, либо индивидуально на каждый из них (что может быть просто неоправданно, если действия одни и те же).

Ну, а если для каждого из многих элементов вешать обработчик на документ, который перебирает весь документ в поисках нужного элемента - время обработки умножится на количество элементов... очевидная дурь.
Ответ написан
Комментировать
@hitrick
Тут вопрос не в производительности, а в потребляемой памяти. Под каждый обработчик выделяется память. Поэтому делегирование это оптимальное решение.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Rocket Смоленск
от 80 000 до 130 000 ₽
div. Ставрополь
от 40 000 до 90 000 ₽
Wanted. Санкт-Петербург
До 220 000 ₽