We recently had to include a corporate masthead on the top of one of our sites. We were supplied with the code for the masthead, which includes a popup menu. The menu is very simple – a button has a mouseover effect which fades in a single popup menu. On mouseout the menu waits for half a second before fading out again. Quite simple. The code we were given used jQuery to accomplish the effects, which meant the entire masthead took over 100Kb. The basic jQuery framework itself took a little over 70Kb of that, and the actual custom javascript code that used the jQuery took a little more.

Let’s try it without…

Now, I really don’t like jQuery (as some of you may have noticed), so I got permission to write a functionally equivalent masthead myself without using jQuery. The whole thing came in at under 25Kb (including images), with the entire script portion of that at less than 2Kb.

Unwieldy script

This fact illustrates one of the biggest problems I have with jQuery. It has grown so large that it is only really efficient to use if you are writing a really large and complicated interactive application. For anything smaller than that, loading the framework itself takes 10 times more effort for the browser than the actual working code. Almost all of that effort is completely wasted, and will never be used.

In my opinion, jQuery is a very powerful and useful piece of technology when used in the appropriate situation, but there are far too many people who use it as a crutch to cover ignorance or incompetence. A little effort to learn the actual language here (that’s JavaScript) would show many people that there are much more efficient ways to produce the same effects.