Which code in theory will work faster?

Question

css

There is a big project with connected jQuery for plugins. But the rest of the JS if written without using jQuery, will it give at least some performance boost?
Option 1

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

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

Option 2

var link = $('.link');

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

Answer 1

:before :after background with this image, the easiest option

Answer 2

Will it give any performance boost?

By itself. Any library "drags" overhead. That's just the increase in speed in this example will not be noticeable.

Answer 3

In this example, there will be an increase in speed, but it will be so minimal that it can be neglected. And in real code, the performance will most likely be even worse, because. jquery has a bunch of optimizations. More effort will be spent, and the code will be more difficult to maintain in the future. So there is no point in saving on matches in this case, and taking care of performance in bottlenecks. For example, when animating, rendering large lists, updating, etc.

Answer 4

Since jQuery already exists, why not use it? A handy thing. In your example, you won't notice the difference.
It may make sense to rewrite some separate pieces to vanilla js that slow down due to jquery. But this is not so common.