@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 просмотров
Пригласить эксперта
Ответы на вопрос 3
1й вариант - очень многословный. Не говоря даже о том, что в коде ошибка (не хватает })
2й вариант - навешиваем хендлер на все элементы, а фильтруемся уже внутри хендлера
3й вариант - как 1й, но более читабельный.

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

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

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

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

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

Похожие вопросы