title: Native JavaScript vs. jQuery - real-world performance vs. theoretical benchmarks
body: <p>After a decade or so, I started to get into web development again. I set up a page with about 50 different input fields in all variations, which manipulate the contents of a div. Favoring performance over convenience, I wrote all the event handlers in native JS. Out of interest, I replicated the page using jQuery.</p>
  
  <p>Now, in native JS I cannot really group any event handlers for those input fields, even if they do similar things. Creating them with a loop doesn't save much code either, since it's never more than 1-3 related input fields. In the end, I have a whole bunch of functions that look like this:</p>
  
  <pre><code>var input = document.getElementById('input');
  input.addEventListener('input', function() {
      // do stuff
  });
  input.addEventListener('change', function() {
      // do stuff
  });
  </code></pre>
  
  <p>The JS for that test page is about 20 kb (unminified). The replicated JS using jQuery instead of native JS is about 9 kb (unminified).</p>
  
  <p>While researching jQuery, all the articles that advise against it would feature some benchmark that shows that after x million iterations of some method, native JS was x seconds faster than jQuery.</p>
  
  <p>The question I ask myself is: How relevant is this in real-world web applications. I mean, aside from the fact that it took me about four times longer to write the native JS, wouldn't downloading more than twice as much JS slow down the viewer much more than a theoretical x millionth slower execution time per method?</p>