Is the size of jQuery detrimental?

Question

Before I start learning how to use the jQuery library I want to reassure myself about something that is concerning me with regards to the size of the file...

I'm well aware that browsers and servers cache files such as jQuery - meaning, in theory, that the file should only be downloaded the once, and therefore speed of subsequent use is increased.

My questions is more about how browsers handle javascript files, and whether there is a detrimental effect in having a 32k code file being processed by the browser each and everytime a page is loaded? It's not just the size of the file either, but the complexity of it at the same time.

Or is my understanding incorrect, and that browsers not only cache the javascript file, but also some sort of "compiled" version of that file? (Yes, I know javascript is not actually "compiled", but hopefully you know what I mean.)

I guess the majority of browsers have the ability to process the file quickly enough that it will make next-to-no difference, and that the speed benefit of having to process less code written to utilise jQuery makes up for it.

Answer 1

Your concerns with asset size and js engine performance have a few overlapping factors you need to consider. Ultimately only you will be able to determine what is appropriate/acceptable for your project.

Size

Possibly stating the obvious but we will start here.

Any opportunity you have to reduce the size of assets consumed by a page is a good thing. Keep your markup, styles and js lean. Steer clear of adopting the mentality that your user base will always have a high speed connection at their disposal. For example, think of a mobile audience and how their connection speed will fluctuate. A page that loads quickly is the first step to a great user experience.

Trim the fat and make sure you have validated your inclusion of jQuery into your project.

Why jQuery?

Your stating "Before I start learning how to use the jQuery library" leads me to believe you may be new to web development and js development. Not intended as a dig on you or the validity of your question but this assumption will drive where I'm going here.

Overall exposing yourself to the jQuery library would be a great thing, even if it is not the right choice for your project.

The jQuery library has matured into something pretty exceptional over the years and provides some elegant solutions to every day cross browser js problems. Browsing the source code and getting to understand some of the concepts implemented will only help you along the way.

Also, jQuery is everywhere. Regardless of any personal opinions you may form, jQuery is one of the most popular libraries in a developers toolbox and doesn't appear to be going anywhere. Even if you never use jQuery in projects you develop from the ground up, you will surely encounter somewhere along the way. Being familiar with the library will only benefit your development efforts.

Ultimately you need to evaluate why you are considering bringing jQuery into your project. Is it just the selector engine you will be using most? If you are doing basic DOM manipulation and only need a good selector engine, consider going straight to Sizzle, it is just 4KB (minified and gzipped).

Maybe jQuery is a dependency of a cool plugin you want to include. Can you rewrite it on your own to lean it out? Size the work and examine if the effort is worth the possible file size savings. If you are saving just a few KB but need 40 hours to complete the work, is it worth it?

Browser Support Matrix

Create a browser support matrix. The browsers you support will have a direct impact in not only the speed but also the size of your assets.

Performance/Speed

Examine the performance differences of the supported js engines. This will allow you to forecast speed of js on the page, from there you can make any concessions toward what you feel is acceptable.

Keep in mind the quality and integrity of the js (both yours and that of libraries such as jQuery) will greatly influence performance as well. Faster js engines such as V8 for Chrome may be a bit more forgiving of poorly written js where as JScript for IE7 may expose the flaws and greatly degrade performance.

jQuery is a library that certainly factors performance in the js that is authored for the core. You will likely find that most performance challenged jQuery originates from 3rd party plugins that may not do extensive cross browser benchmarking.

Size Considerations

As noted above, jQuery is packaged with a number of cross browser fixes for various gaps in DOM API support. This may save you considerable effort or add some bloat that may not be needed. Examine which way your support matrix leans (older browsers vs modern browsers) and determine how this may impact your project. If you find yourself solely targeting the latest and greatest browsers, it is conceivable you may be able to author your own jQuery modeled library adding in only the features needed for your project. Don't forget to size the work and see how it impacts the bottom line.

Use jQuery

The bottom line is that if your project relies heavily on js to aide in functionality and user experience, it's tough to argue usage of jQuery would be a bad choice. When you take into consideration the effort required, you likely won't have the man hours available to write leaner/more efficient code. Think about the effort required not only author an equivalent library (even if pruned of features) but the effort required to maintain it. You need to have the coding chops on par with an army of developers to keep pace.

Whatever you decide, good luck to you!