Question

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 work 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?

Answer 1

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