Question

I use simple javascripts, jquery library and many plugins , should i make one file for all if yes then what we need to “just copy and paste and code from all file into one in needed order” or any thing else need to be considerd.

as stated here http://developer.yahoo.com/performance/rules.html#num_http

Combined files are a way to reduce the
number of HTTP requests by combining
all scripts into a single script, and
similarly combining all CSS into a
single stylesheet. Combining files is
more challenging when the scripts and
stylesheets vary from page to page,
but making this part of your release
process improves response times.

and this http://developer.yahoo.com/performance/rules.html#js_bottom

The problem caused by scripts is that
they block parallel downloads. The
HTTP/1.1 specification suggests that
browsers download no more than two
components in parallel per hostname.
If you serve your images from multiple
hostnames, you can get more than two
downloads to occur in parallel. While
a script is downloading, however, the
browser won’t start any other
downloads, even on different hostname

It these are god practices then

How to combine multiple javascript ito one without getting any conflict?

Is it just same as i copy all css code from all files into one or it’s tricky?

Answer 1

For each file you have, there are two steps :

• send the HTTP request to the server
• download the content of the file

If you reduce the number of files by combining them, you will reduce the number of HTTP requests — which means your page will load a bit faster ;; which is good for your users ; which is why it’s recommended.

But this will make debuggig harder, which is why it’s recommended to do this only on your production environment, and not on the development platform — hence the “making this part of your release process” part.

Of course, the process of combining your files content should not be done manually — else, you’ll have to re-do it each time there’s a modification made ; it should be fully automated, and done at the time you are building the archive that is going to be deployed on your production server.

Also :

• You might gain a bit on the “dowload” part if using minification
• You will gain a lot more on the “download” part if using compression (see mod_deflate, for Apache)

Ideally, you can use all three solutions, btw 😉

Placing the <script> tags at the end of your page will :

• allow the content of the page (which generall is what matters the most) to be displayed faster
• but will only work if your page/JS is coded “correctly” (i.e. unobstrusive JS, not using JS “hardcoded” in the HTML page)

This can help too — but might be a bit harder to achieve than combinaison+minification+compression.