Is there a jQuery alternative for building faster web sites

Question

We are about to commence a redesign of our site and are exploring all options in improving performance. The site is fairly heavy in javascript loaded adverts, therefore we need to be really lean with the javascript we use.

Do any of you have any experience of lighter frameworks or more efficient frameworks that I could explore? Or any resources that you could point me toward? YUI looks like an interesting concept … has the loader being tested in anger? ANy good?

Any thoughts would be appreciated.

Cheers.

edit: Sorry, I wasn't clear. The sites performance currently is pretty good, we are not redesigning due to performance issues, it is due to a rebrand. We just wanted to take the opportunity to review best practices.

Answer 1

jQuery 1.4.2 is lean and mean. You'll be hard pressed finding something faster or more lightweight.

As an example, here is a framework test called slickspeed from mootools. It tests a framework's ability at finding elements in the DOM. The version of jQuery being tested is 1.2.6. Depending on your browser, jQuery performs exceptionally well. In my Chrome browser, jQuery beat all the others with a total time of 20 milliseconds.

And since version 1.2, jQuery has had astounding improvements in optimization and speed, especially with 1.4.

That said, a framework isn't going to make you code better. You can write some seriously slow scripts using any framework, including jQuery.

If, however, you write optimized code, jQuery can be so fast you don't even notice.

Pointy's comment above is spot on. All these guys do all day is worry about how to perform better. So it's pretty optimized.

addendum

This is from jQuery's blog:

While comprehensive benchmarks like Taskspeed can be interesting if deconstructed into individual sub-tests for further study, as a project we tend to stay away from using them as an accurate measure of true, overall, library performance. Considering how many aspects make up a library, not to mention the different techniques that they offer, cumulative results rarely reflect how an actual user may use a library.

So take that as you will.

Answer 2

I prefer YUI3 for larger apps and just about anywhere that 'load on demand' can offer benefits :)

I agree that slowdowns mostly stem from how you implement your app, which is one of the benefits, imho, of YUI, it lends itself naturally towards more modular implementations.

Using the yui loader to bring in page elements widget style allows for good code reuse (and caching) as well letting the user see 'something' quicker.

It won't really solve your JS ad issues though, for that, the best thing you can do is load it as near the bottom of the page as possible, and perhaps look at what loading options the adservers have.

Re: Stephen's comment Well, raw speed for tight loops are sometimes meaningful, sometimes not. There is also the issue of the implementations used for the comparison, the YUI3 code posted in Ejohns version looks positively gimped compared to the jQuery code, look fx at the first one. Where jQuery adds almost the complete DOM element from a string while YUI3 is going thru all kinds of hoops, relatively speaking.

For a version that is written by someone who knows YUI3 have a look at http://yuilibrary.com/~msweeney/yui-tests/taskspeed/ the newest jquery isn't represented, but it does have YUI3 as ~4 times faster overall than jquery 1.3.2 in my Chrome.

Update

http://www.yuiblog.com/blog/2010/10/27/jquery-and-yui-3-a-tale-of-two-javascript-libraries/ a jquery users experience of yui3.

Answer 3

I think you should have a look at zepto.js

http://zeptojs.com/

this article gives you some advices for porting your jquery code

http://blog.pamelafox.org/2012/03/porting-jquery-plugins-to-zepto-tips.html

Answer 4

Probably the best place to start off is not to ask what frameworks can help but why your current site has bad performance. I would start off with tools like Yahoo's YSlow and also Dynatrace ajax edition. Dynatrace is nice because it will point out javascript/dom manip stuff that make your pages slow. You will want to use more than just two performance tools though since they all pretty much have their own idea's on what makes a page fast. Once you have that down then I would come into a forum and state that your having performance issues with X and what can I do to fix.

Answer 5

vapor.js is the world's smallest and fastest javascript library

http://vaporjs.com/

Answer 6

Sprint is a tiny, fast alternative. Check out the repo for benchmarks on a few functions, compared with recent versions of jQuery and Zepto.

Answer 7

jQuery is plenty lightweight if coded properly. It sounds like which framework you are using is not the problem, but either a) why the javascript your writing is performing slowly, or b) why you are using so many slow loading ads to begin with.

But if you really want to look into other frameworks, here's a handy comparison chart: Comparison of JavaScript Frameworks

Answer 8

I just wrote an internal app for our company using jquery and jquery UI (http://jqueryui.com/), mixed in with c#. I found it to be extremely lean and fast - no problems whatsoever.

the jquery ui makes it easy to theme the website...

and by adding other components like blockui, jgrowl, etc you should be able to do anything you want!