Native js vs jquery для отслеживания событий

Всегда было интересно, что лучше использовать для отслеживания событий: native js или jquery.

Решил проверить 3 селектора: querySelectorAll, getElementsByClassName и $(‘.classname’).

Первый тест на скорость. Вот результаты с jsperf.com

Метрика operations per second — количество исполнений скрипта в секунду.

По чарту очевидно: getElementsByClassName быстрее остальных. На втором месте селектор jquery, а затем querySelectorAll.

Теперь сравним селекторы в бою. Настроим отслеживание клика одного элемента и проверим количество событий в GA.

// Отслеживание клика на категории рекомендаций в карточке jquery
$('.classname').on('click', function (){ 
	dataLayer.push({
        'event':'addEvents_makeActions',
        'action_cat':'Карточка',
        'action_name':'Рекомендации jQuery',
        'action_param': ''
     });
});

// Отслеживание клика на категории рекомендаций в карточке querySelectorAll
var selector= document.querySelectorAll('.classname');
for (var i = 0; i < selector.length; i++) {
	selector[i].addEventListener('click', function(e) {
			dataLayer.push({
        		'event':'addEvents_makeActions',
        		'action_cat':'Карточка',
        		'action_name':'Рекомендации querySelectorAll',
        		'action_param': ''
      		});
	}, false)
}
   
// Отслеживание клика на категории рекомендаций в карточке getElementsByClassName
var selector = document.getElementsByClassName('classname');
for (var i = 0; i < selector.length; i++) {
	selector[i].addEventListener('click', function(e) {
			dataLayer.push({
        		'event':'addEvents_makeActions',
        		'action_cat':'Карточка',
        		'action_name':'Рекомендации getElementsByClassName',
        		'action_param': ''
      		});
	}, false)
}

Результаты:

Я сделал такой вывод: если на сайте уже стоит jquery, то используйте, что хотите. Если jquery нет, то не стоит его ставить отдельно, лучше трекать через js.