Does separating your Javascripts into separate files have performance implications?

Question

I'm writing a PhoneGap(Cordova) app with jQuery and jQuery Mobile.

I'm a noob, so for simplicity I like to keep my scripts in separate .js files, with functions divided between them roughly according to function.

(1) Are there performance implications to this method?

(2) Are there programmatic effects that this has that I'm unaware of?

(3) Since it's a Cordova app, all the files will be pre-packaged, but does this turn into a better/worse idea when you're talking about a classically-accessed website?

Thanks!

---

EDIT

Since asking this question, I found this blog post. http://css-tricks.com/css-sprites/. It addresses the issue of multiple HTTP requests and the associated performance issues, albeit in the context of images.

Answer 1

1. Yes:

   • It takes longer to load several small files than one large file.
   • The scripts are executed in order, so with several files you have a load - run - load - run cycle, where each file can't be loaded until the previos has run.

2. The scripts run in order, so if one depends on another, they have to be in the right order.

3. If it's loaded as one package, the network transfer time would be the same, but the process of loading the scripts into the page is still somewhat more complicated with several scripts.

Answer 2

1. Normally it does not effect performance much, but reduces the no. of requests generating from client browser.
2. There are no programmatic effects of keeping js in seperate files.
3. For a classic website, its good to keep it the way you are using.

as far as I understand, it is a design issue, and you need to keep balance between factoring/cumulating your scripts.