What's the downside of using too much JavaScript?

Question

I would like to know what are some downsides using too much JavaScript code in a web page?

For example, I will use a jQuery framework for my dropdown menus, tabs and accordion. And other JavaScripts for my calendar (even-though there is available calendar that uses jQuery) and other JavaScript for other stuff? What is the effect? (My opinion is conflicting of JavaScript and heavy to load)

I know a lot of developers that masters more than 2 JavaScript frameworks. My question is: When developing a project how do you pick a JavaScript framework for that project? Why will you use MooTools or jQuery for that project? (I know that is a matter of choice), but is there other reason? Like mootools is good for this... or jQuery is good for that..

I want to hear you opinion.

Answer 1

It will depend on the browser (and back end) and how it performs /scales to many scripts. When developing a solution think about the audience's requirements first. Are they going to be running quad core monsters on super fast fibre optic links or small phones with a GPRS links. Then decide what technologies will fill those needs.

Don't start from the technology first.

Answer 2

The answer is pretty obvious: more JavaScript means a bigger performance overhead. Depending on how you've structured your files, it might mean more HTTP requests, more data to load, more code to parse etc. If it's at all avoidable, you should pick a good framework (like jQuery) and stick with it, not mix and match them.

Performance aside, multiple frameworks also mean less maintainable code, because the maintainers have to be familiar with each framework to be able to work with them.

There are probably some exceptions, like using a general framework like jQuery together with a more specific one like Raphael, but usually that's solved by plugins.

Answer 3

From your question, a couple of issues come to mind:

• Having a lot of little script files can be a performance problem. If you're going to use a lot of different scripts, combine them into one script file (and minify it and serve it with gzip compression). There's a tip related to this on the unofficial Prototype & script.aculo.us wiki (disclaimer: I mostly wrote that tip, but with a lot of input from smarter people). Also look at whether you can leverage CDNs (most frameworks are now available via the Google CDN, for instance).
• Having lots of different frameworks (jQuery, Prototype, MooTools, YUI, etc.) in the same site can become a skills issue -- anyone working on the site will need to have skills in various different frameworks.
• Some frameworks are incompatible with one another (for instance, I doubt Prototype and MooTools can currently co-exist on a page; jQuery and Prototype can via jQuery's "no conflict" mode).

In terms of choosing a single framework, look at what you're trying to do -- some frameworks will better suit some sites than others. Also look at the skillsets your developers already have, as the less new stuff they have to learn, the more time they can spend building your site. Look at the community around the framework. Consider the availability of plug-ins (although there are a lot of low-quality plug-ins out there; don't judge by quantity alone). Look at whether the API of the framework sits well with your approach to things.

Answer 4

I'd say there are a few possible downsides to using multiple libraries:

1. Initial load time: you need to be a bit careful about your file sizes. For example, if that calendar you are using requires a whole separate library to function, you have to question why you're not just using the jQuery version.
2. Client performance: you're offloading a lot of processing onto the client's computer, and older machines/browsers will struggle with particularly intensive scripting. This is a question of knowing your target audience though - if you're aiming at techies with monster PC's then you're more likely to get away with heavy scripting.
3. Conflicts: as you say, there can be conflicts between the functions in different libraries. There are ways round this, but why give yourself the problem in the first place?

At the end of the day, all these libraries are just a different way of writing JavaScript. Pick whichever library works for you; the one that allows you to get the job done fastest and with the least errors.

Answer 5

What are some downside using to many JavaScripts in a website?

• HTTP overhead
• Low maintainability

Why will you use MooTools or jQuery for that project?

This is not just a matter of personal taste. Check out this question for more details.

There are specific frameworks out there for specific things--Take Ext JS for example, which tries to encompass everything a site needs. This is not what jQuery does.

Answer 6

One aspect is that it can take time to load. If you have your scripts in included or linked files, that takes load time and more HTTP requests.

Also, more scripts can slow down the client computer. Many users nowdays have multiple pages or tabs open at once, and if yours is so heavy and slow that having other pages open at the same time makes things unstable on a base-level computer, then your website is probably a little excessive.

And finally, what if the user doesn't have javascript, or has it turned off? Will it totally break your site?

Answer 7

Don't also forget that some users may have Javascript disabled, so having some of the required features of the website (ie menus, navigation, forms etc) JS based will result for those users to be unable to view your site.

Answer 8

• Consider situation in which 99% of your target consumer do not have javascript enabled in their browser and you write heavy javascript code in your website.
• Also javascript runs on client machine with a very low priority which may slow down performance of your website.

And another one

• All of your javascript code gets exposed as javascript is an interpreted language

Answer 9

Using a lot of JavaScript files shouldn't be a problem since you can always merge them all together to minimize HTTP requests. Of course to execute all that JavaScript it takes browser's time. There's also chance that there will be conflicts between all those JS libraries/plugins or within DOM.

As for choosing the right library it really depends on what kind of site/application you are making. If you just want to use pre-made plugins then there's isn't a big difference which library you use and you should just chose the one which has more of the plugins you want to use and I'm quite sure that jQuery is the best choice here since it has the most plugins overall.

From other hand if you want to write your own components/plugins/code then you should test each of them out and see which one suits your coding style and project the best. For example a while ago I found Prototype suits my taste better and is quite nice for big JS heavy projects. But jQuery has gone a long way since then so I'd probably try each of the most popular libraries out if I had to make a new project.