jQuery тип селектора по скорости нажатия

Question

Я думал, что этот тип селектора

$('.select-choice').on('click', window.callable);

намного лучше, чем этот

$('body').on('click', '.select-choice', window.callable);

, потому что мы контролируем не все тело, а только один элемент.

Но, как ни странно, результаты совершенно противоположны, вы знаете, почему? Я ошибся в тесте?

https://measurethat.net/Benchmarks/Show/8569/2/jquery-body-fit-onclick-filter-vs-direct---logged-now

Answer 1

Давайте проверим!

Первая часть кода : Для меня от 1 мс до 2 мс.

let callable = () => console.log("called"),
    body = $("body"),
    btn = $(".btn"); // Class selector like in Question
    
console.time("test");
btn.on("click", callable);
btn.click();
console.timeEnd("test")

// Always around 1 ms to 2 ms.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn"></button>

Вторая часть кода : от 2 мс до 4 мс для меня.

let callable = () => console.log("called"),
    body = $("body"),
    btn = $(".btn"); // Class selector like in Question
    
console.time("test");
body.on("click", ".btn", callable);
btn.click();
console.timeEnd("test")

// Around 2ms to 4ms for me.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn"></button>

Результат (по крайней мере, на моем компьютере): первый фрагмент был быстрее, он является прямым.

Ты правильно подумал! Это занимает меньше времени в прямом прослушивателе событий, и я думаю, что ваши рассуждения также верны. Не знаю насчет ссылки, потому что на самом деле я ничего не понимаю, но, может быть, этот тест поможет!