What's inside jQuery?

jQuery is probably one of the most widely used pieces of software all-round. When it first came out, it was sort of like a revelation to almost everyone in our field - so thank you for that, John Resig. jQuery brings the kind of convenience most of us web-developers would rather not live without. (seriously, we'd all go around killing ourselves.)

But what's inside our daily bread? Today, I'd like to take a look at precisely what's inside jQuery, in terms of bytes vs features. I will be referring to the minified size of each file - not the gzipped filesize. Your computer has to parse and run 95KB of JavaScript, regardless of how it gets delivered.

At release 1.0, jQuery was a cozy little 17KB of JavaScript. Over the years, it has grown to more than 5 times it's original size. Below is a table showing the footprint of the final release of each version.

Version	Bytes	What happened?
1.0	17,170	minor improvements
1.0.4	19,274	minor improvements
1.1.4	22,421	minor improvements
1.2.6	55,516	new AJAX features, animation/effects, some new traversal functions
1.3.2	56,815	Sizzle was introduced
1.4.4	78,766	substantial performance improvements
1.5.2	85,557	new AJAX framework, deferred objects, and performance improvements
1.6.4	91,602	various new extension-points in the API, performance improvements
1.7.1	97,086	new event framework, performance improvements

Nobody doesn't love bar charts, so here's what that looks like:

jQuery has put on weight since 2006, no argument there. Thinking back to 2006, I have to ask: is jQuery really radically different today, compared to six years ago? Granted, it's a much better framework, a much more solid and extensible architecture, but how many of us really use it as a framework?

For most day-to-day jobs, jQuery is used for the same thing it was always used for: selection, manipulation, event management and annoying little animations. Can we really justify the 550% weight-increase?

Nutrition Facts

Let's take a look at the ingredients - what do you get in 95KB of JavaScript?

Nobody doesn't love pie, so let's start with a pretty pie chart:

This is a breakdown of the files that make up jQuery - I minified each file for comparison, so we're comparing the amount of bytes required to deliver each subset of features.

Below is a description of each of the ingredients that make up the jQuery special sauce:

Filename	Bytes	%	Contents
sizzle.js	15,572	16.26%	CSS3 selectors etc. - the heart of jQuery
event.js	12,632	13.19%	event-driven programming framework and mouse/keyboard/focus events
manipulation.js	9,992	10.44%	DOM manipulation functions
core.js	9,033	9.43%	includes bootstrapping, browser checking, type-checking, collection helpers and JSON/XML support
ajax.js	8,205	8.57%	cross-browser AJAX abstraction
effects.js	8,007	8.36%	animation framework and basic slide/fade support
attributes.js	7,417	7.75%	includes support for attributes, properties, classes
css.js	4,281	4.47%	basic CSS/style abstraction and helpers
support.js	4,126	4.31%	cross-browser feature availibility detection
traversing.js	3,883	4.06%	searching and filtering operations for collections of elements
offset.js	3,433	3.59%	cross-browser page/scroll offset checking and manipulation
data.js	2,975	3.11%	manages metadata-association with DOM elements
queue.js	1,877	1.96%	event queue framework (supports animation etc.)
deferred.js	1,644	1.72%	deferred execution framework
callbacks.js	1,457	1.52%
dimensions.js	735	0.77%	inner/outer width/height measurement and manipulation
sizzle-jquery.js	256	0.27%	Sizzle.js configuration
exports.js	151	0.16%	support for AMD proposal (RequireJS etc.)
intro.js	57	0.06%
outro.js	11	0.01%
Total	95,744

(yum!)

A good half of that pie is the stuff that makes jQuery sizzle. Sizzle provides the CSS3 selectors you would rather not live without, and "manipulation.js" is what you need to make it edible. (the DOM, that is.) (editable, that is.)

Of course, without AJAX support and a convenient CSS abstraction, you would still want to shoot yourself. There are certainly lots of other odds and ends in there that you might someday find yourself needing. In a sense, jQuery is like a swiss army-knife for the client-side - it has a tool for everything. Even weird things like that toothpick that you'll most likely never use because you can't be entirely sure where it's been.

Yet, thinking back to 2006, I don't recall myself thinking there was really anything desperately missing in jQuery - okay, smaller things, once or twice. But it did pretty much everything I needed to do.

Of course, the medium itself has grown and evolved, and I'm not going to say that requirements and expectations haven't grown with it.

Have your needs grown by 550%?

Does jQuery do everything it used to do 5.5 times "better"?

Alternative Diet

I know, you've been drinking Coca-Cola since you were 2, and you really can't imagine there's another softdrink that can take it's place. No worries, I'll be the last person on Earth to ask you to give up Coke. Nay jQuery.

But in terms of calories (well, bytes) you may wish to supplement your diet with some slimmer alternatives.

• There are several lightweight AJAX libraries, typically under 3KB - compare to jQuery's "ajax.js" at 8KB.
• You can find several alternative CSS selector libraries as well, some of them under 3KB - compare to Sizzle at 15KB. Zest is one particularly interesting alternative that claims to be even faster than Sizzle, although the name isn't quite as cool.
• Zepto is another interesting "full stack" library with many of the most essential jQuery-features in a very small package, and with a jQuery-compatible API. Compare at 20KB for the whole framework.

And last but not least, I'd like to mention a project called Ender - which makes the aggressive claim that:

"small, loosely coupled modules are the future and large, tightly-bound monolithic libraries are the past"

Granted, 95KB is not a lot in this day and age - probably not enough that anybody would go as far as to call jQuery a "monolith".

Would you?