General Question JQ/PHP

What is faster on opening and proccecing:

Having under 1 file all the jquery functions or

Each function to a separate file and call it when ever you need it?

Ex. I have a blabla.js file that has 4 functions in it. And my xaxa.php that calls the blabla.js.

Now, when I firstly open my page its fast enough. No problem (even with cookies cleared and all)

BUT... when I first (and after) click a button that activates a part of my blabla.js all my links and functions are opening/working slower.

So should I separate my functions and load each js file where ever I need it or my problem is somewhere else?

Thank you

(As I said I start to suspect something in my structure) So here is a sample of my jq:

$(document).ready(function(){
 $(".avoid_ref_add").click(function(){
  var keyValues = {
    pid : $(this).parent().find('input[name="pid"]').val()
    };
      $.post('help_scripts/cartfunct.php', keyValues, function(rsp){
        $('#content').load("p_body.php");
      });
 return false;
 });
function remove
function update
});

and I have my items.php items2.php items3.php...

Now, MY COOKIES I HAVE THEM CLEARED NO CACHE... When I firt open the site, it loads fast and all links are fast...

But if I click that add button everything start to wor开发者_C百科k REALLY slow...

IF I just refresh the whole page it starts working fast again and so on...

FOR ME is quite strange and I cannot figure what I did wrong... Because if the page was slow, it wouldn't load fast from the first time... Correct? Is it something in my code?

You should optimally put all your javascript in one javascript file.

This file could be served with gzip compression and far-future expiry headers to limit bandwidth usage (and result in faster pageloads). You could even run a minimizer on your javascript to reduce file size.

What you are really asking for is the art of minimalization/optimisation and this article is a good read: http://developer.yahoo.com/performance/rules.html

It is clearly better to hold all your JS functions in a single file and this should be faster. Think that when a different function needs to be called you want to avoid the delay inserted by the hit to the server

Execution speed should not be affected by the way you distribute functions among the files. However, download of all resources related to a page is faster when fewer files need to be downloaded. That's because each HTTP requests comes with a HTTP request header and each HTTP response come with a HTTP response header. If the keep-alive feature of HTTP is not used, additional overhead comes from establishing a TCP connection for each request.

You don't really have to separate each function to a separate file. I would suggest keeping the functions that are related to each other in the same JS file and putting others in another JS file.

This makes it easier for you to manage the code and increases the reusability/modularity of the JS file.

After that, you can use minify http://code.google.com/p/minify/ to combine the necessary JS files when you need to, thus reducing the number of requests made to retrieve the JS files.