9 января 2018
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.
Поделиться
Поделиться
Твитнуть
Отправить