Konstantyn

Ну вот пример с JQuery 1.11.3

По идее эта штука

<a href="#" onclick="return true;">go go go</a>

под капотом тоже заюзает addEventListener

нагружать браузер каждого пользователя расчетами для построения всей html страницы (типа vue)

Это очень спорное утверждение. Любое действие, которое влечет за собой изменение DOM елементов — ведет к перестроению всей или части страницы. Если вы увеличите ширину блока в css на 1px — все остальные елементы будут перестроены, так как нужно заново пересчитать их положение на странице(не относится к елементам с абсолютным позиционированием). С другой же стороны, не скажу за vue, но тот же реакт стал популярным за счет своего shadow DOM, который сильно оптимизирует работу с DOM елементами, так как он под капотом вычисляет состояние каждого елемента, сравнивает с предыдущим, и обновляет только в том случае, если состояние поменялось.

Мне кажется, что вы не до конца понимаете процесс.
JQuery НЕ добавляет ничего в DOM узлы и НЕ модифицирует DOM дерево. Ваш код:

let $element = $('.class_element');

присвоит в переменную $element JQuery объект, это НЕ DOM елемент. JQuery объект в себе содержит ссылку на DOM елемент, такую же, которую вы получите при вызове:

document.querySelector('.class_element');

а так же содержит много дополнительных методов для реализации пресловутых чейнов вызовов JQuery, например:

$('.class_element').css('color', 'red').hide().show();

Каждый из этих методов css(), hide(), hide() вернет такой же JQuery объект.

Насчет

К примеру в свойства узла добавлены всяческие onclick, onmouseover и десятки других возможных событий. И не важно используешь ты их или нет.

Не совсем понятно, что вы вкладываете тут в понятия «события», но в реальности это просто методы объекта JQuery, которые упрощают добавление коллбека на определенный ивент, сами по себе без вашего участия они не подписываются на события.

А чтобы добавить событие в JS узел — нужно писать addEventListener

JQuery тоже будет использовать addEventListener под капотом.

И по поводу

Грубо говоря, добавляя под сотню (не считал) свойств в каждый используемый элемент. И это все висит в памяти, чтобы браузер в любой момент мог использовать все дополнительные методы каждого элемента.

это тоже не корректное выражение. JS — высокоуровневый язык программирования, за вас все делает garbage collector, и оно висит в памяти ровно до того момента, пока браузер не решит это удалить. А он с этой задачей справляется достаточно таки хорошо, хотя в старых версиях JQuery можно было стрельнуть себе в ногу и организовать утечку памяти.

И еще:
Все 100 методов, количеством которых вы не довольны, находятся НЕ непосредственно в JQuery объекте, который вы получили в результате выборки, а в его прототипе. А это означает, что если вы создадите 100 таких объектов, они все будут ссылаться на один прототип.

Вторая причина, которой я здесь в обсуждении не увидел это дополнительная нагрузка на память. Дело в том, что jQuery сильно нагружает используемые DOM-элементы собственными свойствами и методами. Грубо говоря, добавляя под сотню (не считал) свойств в каждый используемый элемент. И это все висит в памяти, чтобы браузер в любой момент мог использовать все дополнительные методы каждого элемента.

А можно пруфы?