8

Does anyone know if there are studies done that show the performance overhead of using javascript libraries (other than the obvious of their download time) vs using just basic javascript? The libraries are so huge these days and I was curious.

From my computer science degree it seems it should have growth n. (in other words linear).

In computer science terms this is non threatening but how does it actually effect page loading time and page performance in milliseconds? I know CPU is an issue, RAM, and so on. But are there any test performed that can gauge these sorts of things?

I know another factor is libraries are often optimized to do much the same thing you'd be coding by hand in a less optimized fashion but also libraries have overhead and not all of that functionality will be used.

Edit: I found this that seems to answer my question thoroughly even though it started out about something else: When to use Vanilla JavaScript vs. jQuery?

"As the comments are quick to point out (and I agree with 100%) the statements above refer to benchmarking code. A 'native' JavaScript solution (assuming it is well written) will outperform a jQuery solution that accomplishes the same thing in nearly every case (I'd love to see an example otherwise). jQuery does speed up development time, which is a significant benefit which I do not mean to downplay. It facilitates easy to read, easy to follow code, which is more than some developers are capable of creating on their own.

In my opinion then, the answer depends on what you're attempting to achieve. If, as I presumed based on your reference to performance benefits, you're after the best possible speed out of your application, then using jQuery introduces overhead every time you call $(). If you're going for readability, consistency, cross browser compatibility, etc, then there are certainly reasons to favor jQuery over 'native' JavaScript."

Community
  • 1
  • 1
  • This is such a general question I don't think it can be answered. The overhead is different for each library, and it depends what you're doing with them. – James M Aug 13 '12 at 14:18
  • Perhaps it is, but I was hoping someone knew of any studies done testing different types of uses that would try to show a larger picture. My intuition is that libraries always have additional overhead but make development and maintenance less costly. –  Aug 13 '12 at 14:19
  • I think your assumptions about how using a library affects performance are basically wrong, especially when you say things like "also libraries have overhead and not all of that functionality will be used". If a library provides a function and you use that function, it's not going to be any slower than if that function was in your own source code. If the library also does other things, the presence of the unused functionality isn't going to make your code run any slower, although it might add a few extra K to load from the server. – James M Aug 13 '12 at 14:22
  • 2
    @JamesMcLaughlin: don't forget the overhead of the interpretation of those libraries. When the page loads it must read through and interpret every line of JS whether you call every function or not. – Matt S Aug 13 '12 at 14:24
  • I thought about that too, but even most commonly used functions will often have extra conditionals at the very least, compared to writing it by hand. –  Aug 13 '12 at 14:24
  • @MattS Modern browsers do that extremely quickly. You'd really have to have a _lot_ of code for it to become a problem. – James M Aug 13 '12 at 14:28
  • @JamesMcLaughlin would be good to know just how quick that is, I guess there is no studies done for this? –  Aug 13 '12 at 14:30
  • @JamesMcLaughlin: No doubt, but I've often seen the impact myself. It's not uncommon to have 5+ large JS libraries on a page simultaneously. – Matt S Aug 13 '12 at 14:31
  • 1
    Cross-browser support can often add a lot of dead code to libraries when they aren't designed very well. My browser has to parse hideous vml fallbacks for IE8 when it has no intention of using it ever. This sort of thing is not a problem with using libraries, just a problem with the library. But I have to agree with @JamesMcLaughlin in that the question is purely subjective. If you were to take a library like jQuery, you might find that studies suggest it's 4 - 10 times slower than vanilla JavaScript. This is a reflection of the fact it encourages dom trawling among other disgraces. – Matt Esch Aug 13 '12 at 14:43

4 Answers4

1

This is a good question! Next to the download time of the library itself, most of the frameworks are not doing very much, which means they do not delay page showing up or something.

JQuery's $.css method, which makes it easy to style elements can be become a performance bottleneck if you need to trigger this very often and operating directly on the style object is much faster.

I my opinion is better to do more with plain javascript, the more you have to gain high performance. For normal stuff like ajax requests, menu-fading and so on the performance of all the frameworks I have ever used is enough, and coding itself speeds up in turn.

philipp
  • 15,947
  • 15
  • 61
  • 106
  • Giving you the answer since you're technically right :) It would be good to see some studies though. –  Aug 13 '12 at 14:40
  • 1
    http://www.amazon.com/Supercharged-JavaScript-Graphics-canvas-jQuery/dp/1449393632/ref=sr_1_1?ie=UTF8&qid=1344868973&sr=8-1&keywords=javascript+graphics in this book are some of this studies you are looking for – philipp Aug 13 '12 at 14:43
0

It depends entirely on the library. However for libraries like jQuery it probably doesn't matter: the performance bottleneck is probably not jQuery, Google provide a CDN-hosted jQuery so it need not even impact the page load time, and the ease of use which jQuery gives you far, far outweighs the minor performance impact. Libraries can also use uncommon or difficult techniques to boost performance, so using a library can sometimes even be faster than what you would write yourself. There's no final answer really.

AshleysBrain
  • 22,335
  • 15
  • 88
  • 124
  • The only thing I don't like about the google CDN argument is people seem to assume it's already on every site out there and that it's implemented in that way and also for the very same version of the very same library.. it just all seems so silly. I'm sure it does save time for some but you can't know if it's the first load or not and it definitely doesn't negate page load times completely. –  Aug 13 '12 at 14:29
0

While not being a direct answer to your question, my answer to this question: "What are some empirical technical reasons not to use jQuery?" and other answers and comments there may be interesting for your research as a lot of them talk about performance issues of using and not using JavaScript libraries and frameworks. I hope it helps.

Community
  • 1
  • 1
rsp
  • 107,747
  • 29
  • 201
  • 177
-1

here is study which made based on performance with js library and venilla js for appending text

http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

and i can say, using venilla javascript is always faster than performing something with the help of libraries. but if you want to save time for developing something, it will be good if you use some library which you are good.

Shreedhar
  • 5,502
  • 3
  • 22
  • 27
  • 2
    The claim about vanilla JavaScript always being faster. Libraries often make optimisations you would never consider if you wrote all of the code by hand, and more often than not a purpose built and battle-tested library for "X" is going to faster than your own hand-rolled implementation of "X". – James M Aug 13 '12 at 14:31
  • @JamesMcLaughlin i am not saying always we should write venilla js, or dont use js libraries right? – Shreedhar Aug 13 '12 at 14:39