2

We use jQuery functions very often. Now, in terms of performance, I heard that it is generally a bad idea, since on one hand, it is easy to write, understand and maintain, but it is said to be slower than the "ugly" raw JavaScript code.

Does it really matter in terms of performance regarding the end-user-experience whether you use jQuery functions or the original functions? For example $('#exampleId').hide() vs document.getElementById('exampleId').style.display='none'?

If so, is there a special minifier who converts bad performing jQuery notations into faster running ones?

Or are these just micro optimizations which can in most cases totally be ignored?

Simon Ferndriger
  • 3,580
  • 6
  • 23
  • 47
  • 1
    *"I heard that it is generally a bad idea, since on one hand, it is easy to write, understand and maintain, but it is said to be slower than the "ugly" raw JavaScript code."* that is true of pretty much every library you use, not just jQuery. You have to decide what is more important: shaving off a few ms from code processing, or development time/maintenance. There certainly are cases where switching from jQuery to plain javascript can have drastic improvements on speed of functionality, but those are generally edge cases and are becoming less common as the library improves. – Kevin B Jun 05 '15 at 17:51
  • Don't you want to post this as an answer with 1 or 2 examples each? I would mark it as solution. – Simon Ferndriger Jun 10 '15 at 06:55

2 Answers2

4

Optimizing code that has not been written is a great way to waist time.

jQuery may be slow, but it cuts down on a tremendous amount of bloat in the javascript syntax.

Keeping things in perspective is important, a 1% improvement in bottleneck performance is worth more than a 100% performance improvement on lightly traversed code.

That being said....

Here are some ways to improve jQuery performance

  • Use native javascript for dom interactions:

    $(jQuery)[0] returns the native selector, allowing you to use native dom interactions where needed. Using this in loops, events, and other bottelnecking code for a performance boost is strongly recommended. (example)

  • Favor IDs over Classes

    This one is kind of a given. jQuery's class object's performance overhead is much larger than its ID object overhead.

  • When you use Classes, give them a context

    Prevent jQuery from traversing the whole DOM using selectors. Swapping out $('.class') for $('.class', '#class-container') will hugely help performance.

  • Reuse selectors

    Always cache your selectors in variables if you use them more than once..... and NEVER select elements inside a loop.

  • Don't use .Each

    It may be tempting, but any for loop will be substantially faster.

Burdock
  • 1,025
  • 1
  • 9
  • 21
1

I'll let you decide whether or not jQuery looks uglier than raw JavaScript. My opinion is that jQuery is less verbose, which I enjoy more.

Now for performance. jQuery is not as performant as raw JavaScript which is true and the link below will clearly show. Unless you are working on pages with and using thousands of element selections and jQuery functions then I'd suggest moving towards raw JavaScript.

http://jsperf.com/jquery-hide-vs-javascript-hide

TL;DR - micro optimizations which can be ignored, usually.

galitskyd
  • 136
  • 5
  • I DO think jQuery is more beautiful to read and understand. Is there a special minifier which converts jQuery back to basic JavaScript? – Simon Ferndriger Jun 08 '15 at 09:45
  • 1
    @SimonFerndriger I'm going to refer you to [this link](http://stackoverflow.com/questions/5685671/is-jquery-compiler-possible). I hope it helps. (I know you didn't say compiler but it is along the same lines) – galitskyd Jun 08 '15 at 20:32
  • Thank you, so if I understand it correctly, it would be possible, but it is not clear whether it would actually bringt performance benefits - and there is currently no running compiler, right? – Simon Ferndriger Jun 10 '15 at 06:54
  • A jQuery complier would ruin much of what Jquery is. A simple library to make javascript easier to read and write. – Burdock Jun 11 '15 at 07:24