Jquery efficient and good performance

Question

I always keep efficiency and performance as the first priority...

So I have a question in mind...Which one will load faster.

Case 1:

A 1000 line code in a single file placed at the bottom of the body tag.

Case 2:

The same 1000 line code divided into separate files like.

File 1 - 200 lines.

File 2 - 200 lines.

File 3 - 200 lines.

File 4 - 200 lines.

File 5 - 200 lines.

Answer 1

Case 1 will be more faster.

On every new file, browser will do request to the server so it's additional time (about 200ms). If you are using one single file, it's more efficient, because browser will do only one request to the server.

More information about speeding up web sites in this article .

Answer 2

Case 1 is faster.

In general you would prefer to produce good readable and easy maintainable code. Often you should prefer this over efficiency.

How to get the best of both? Internally, you should distribute the code thus it is easy to maintain. But when going online you would write a script that puts all together in one file.

An example are many javascript-frameworks, like JQuery . There is an easy to read and maintain version and also a minimal very compressed version. Later is slightly faster but very user unfriendly. Internally they work on the human-friendly version and then use a script which builds the minimal version out of it.