Javascript Performance - Adding Scripts with $.getScript()

Question

I am currently making a sort of web app and part of it works by dynamically loading and adding js scripts to the page. For this I am using JQuery's $.getScript() method which loads it in.

I have it set as cached.

With my program if a script already exists it is loaded again anyway, from what appears to be cache. What I am wondering though is how much would this effect the site and performance. Does a newly loaded script that has the same src as an existing one overwrite the previous one or is the new one added alongside the old one?

Further more as my site is an AJAX site its possible for several scripts from different pages to eventually be loaded up over time. Is there any browser restrictions on how many scripts one can have loaded?

Preoptimization can be a wasted effort if you aren't careful. Read Yahoo's Best Practices for Speeding Up Your Web Site for several suggestions on how to look at this overall, but always remember the caveat that every site is different, so some techniques aren't always necessary, useful, or could (I suppose) prove counter-productive. — Jared Farrish
– Jared Farrish, Commented Mar 11, 2012 at 22:30
And if it's cached, your browser won't ask for another copy unless the cached copy is expired or you otherwise force it to do a full request. Additionally, you don't have any limit of included Javascript files per se (as far as I know), but if you're adding hundreds or thousands of script includes, you have other problems. If your real concern is that you may make several extraneous calls to load the same script, you should address that by other means (such as checking if the file is already included before requesting). — Jared Farrish
– Jared Farrish, Commented Mar 11, 2012 at 22:33
Just going by my console it lists the same file in there but says its cached. Also I actually need it to sort of fire/load each time because it has the document.ready bit that I need it to call. — Petty_Crim
– Petty_Crim, Commented Mar 11, 2012 at 22:42
The script your loading has a $(document).ready() that you need to refire? If you literally just need to rerun that code block, create a function to attach it to the $(document).ready() so you can call it when you need it, or I suppose I don't understand the problem. — Jared Farrish
– Jared Farrish, Commented Mar 11, 2012 at 22:54

Ilya Volodin · Accepted Answer · 2012-03-11 22:43:49Z

2

It will affect site performance. Even if your script is cached on the client with expiration set the browser still needs to parse and execute newly included script. More than that, there's a very good chance you will run into javascript errors because you scripts will override variables already set by previous version. JavaScript parsing and executing is still a blocking operation in all browsers, so while your file is being processed your UI will lock up.

To answer second part of the question, as far as I know there's no limit of number of javascript files on a given page. I've seen pages with over 200 javascripts that didn't throw any exceptions.

answered Mar 11, 2012 at 22:43

Ilya Volodin

11.3k2 gold badges49 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Petty_Crim Over a year ago

My code doesn't use any functions or global vars so that part of the including isn't an issue. I use inline coding to do that sort of thing.

Ilya Volodin Over a year ago

Ok, so probable no JS errors then. Parsing will still block the execution thread however. It's probably better to check first if the script is already included and then add it only if it's not already on the page.

Jared Farrish Over a year ago

+1 for some very salient points. There is another, better way to do this particular thing (rerun a script), using a variable function that can be called.

Jared Farrish · Accepted Answer · 2012-03-11 23:08:11Z

1

I think Ilya has provided some great points to consider, and I think that answers your specific question. If what you're trying to accomplish, however, is rerunning a $(document).ready() handler, you could do:

(function(){
    var myreadyfunction = function(){
        $('#affected').toggleClass('blue');
    };

    $(document).ready(myreadyfunction);

    $(document).ready(function(){
        $('button').click(myreadyfunction);
    });
})();

http://jsfiddle.net/Z97cm/

I've scoped it into an anonymous (function(){})(); to keep out of the global scope, so you might want to consider that if you need to access that function from outside that scope. But that gives you the general idea of what I was talking about.

answered Mar 11, 2012 at 23:08

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

1 Comment

Petty_Crim Over a year ago

Thx for that new trick I will give it a go. Thx also to Ilya for the advice.

Collectives™ on Stack Overflow

Javascript Performance - Adding Scripts with $.getScript()

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related