Какой код в теории будет отрабатывать быстрее?

Question

[myskypesla]

Есть большой проект с подключенным jQuery для плагинов. Но весь остальной JS если написать без использования jQuery, даст ли это хоть какой-то прирост производительности?

Вариант 1

var doc = document,
    link = doc.querySelector('.link');

link.addEventListener('click', function() {
  this.classList.add('active');
});

Вариант 2

var link = $('.link');

link.click(function() {
  $(this).addClass('active');
});

Comments

[ой всё]

а что значит "быстрее"? чем меряете?
было бы еще интересно узнать для какого проекта так критична скорость на клиенте

[myskypesla]

AnneSmith Быстрее значит быстрее, или какой вариант будет менее затратный по времени и ресурсам клиента :) Абсолютно любой проект.

[ой всё]

myskypesla, то есть вы даже не знаете, что вы меряете и для чего

[Bhudh]

В Вариант 1 жестоко не хватает слова All у метода и соответственно цикла в коде ниже.
Вы хоть в консоль выведите doc.querySelector('.link') и $('.link') и полюбуйтесь на различие.

Answer 1

[D3lphi]

даст ли это хоть какой-то прирост производительности?

Само собой. Любая библиотека "тащит за собой" overhead. Вот только прирост к скорости в данном примере не будет заметен.

Comments

[myskypesla]

А если допустим такой на jQuery для кликов, переборов, AJAX и т.д. в проекте написано ~5000 строк, была бы видна разница если переписать на ваниле?

[D3lphi]

myskypesla, Только в тестах. Для пользователя никакой разницы не будет.

[Stalker_RED]

myskypesla, на сложных страницах разница может быть заметна.

Answer 2

[Антон]

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

Comments

[dom1n1k]

Например каких оптимизаций?

Answer 3

[tema_sun]

Раз уже есть jquery, то чего бы им не пользоваться? Удобная же штука. В вашем примере вы разницу не заметите.
Может иметь смысл переписать на ванильный js какие-то отдельные куски, которые тормозят из-за jquery. Но это не так уж часто встречается.

Comments

[myskypesla]

А если подойти так, использовать компонентный подход к написанию js и использовать сразу синтаксис ES6, вдруг через некоторое время будут переводить проект на js framework, то тогда нужно будет немного времени на то, чтобы перетащить весь js в framework, а если будет всё написано на jQuery, то придётся переписывать всё.

[tema_sun]

myskypesla, а вдруг война, а я уставший? =)
Перевести код на какой-то конкретный фреймворк все-равно займет кучу времени.