what is faster?
<script src="../js/SOME.js" type="text/javascript"></script>
OR
$.getScript('../js/SOME.js', function (){ ...
// with $.ajaxSetup({ cache: true });
5 Answers
I'd guess that <script src="../js/SOME.js" type="text/javascript"></script> is faster, as the browser does it natively, while the second alternative first forces the browser to load the page, then use JavaScript to load the script.
The browser might take care of caching by itself, but I'm not too certain.
4 Comments
amosrivera
what javascript does is insert
<script> tags in the html, the browser takes this as normal tags and loads the content... and yes, caching does happen
Blender
So the second option takes more steps (which might be slower by a fraction of a millisecond?). I doubt there would be any significant speed differences.
amosrivera
yeah, i would say is insignificant, but there is an advantage about creating the tags via js, browser usually stops everything else to load javascript which means there is blank page while loading, this doesnt happen when tags are created dynamically (via javascript), i usually use a javascript loader for that see: headjs.com
Blender
That's pretty cool. I'm definitely using this in my next site.
They are the same. But this are facts you should take into account:
To use getScript you need to have loaded jQuery first so add that time (i'm guessing that is what you are using becuase of the
$).jQuery would load it asynchronously which means the browser won't stop everything else to load SOME.js.
Comments
The former, since $.getScript relies on jquery to be initialized.
Comments
They will both take approximately the same time to download. The difference is that the inline script loads with all the rest of the elements on the page, and therefore must compete for bandwidth.
Injecting the script will take place after the page had loaded and after jQuery has loaded. Since the rest of the page elements are likely downloaded by this time it will seem "faster" but will be ready to use "later".
answered Mar 10, 2011 at 16:46
Diodeus - James MacFarlane
115k33 gold badges164 silver badges180 bronze badges
Comments
The fastest would be to load the scripts synchronously whith a script like:
<script id="your-script-id" type="text/javascript">
(function() {
var your-script-id = document.createElement('script');
your-script-id.type = 'text/javascript';
your-script-id.src = ('http://your-script-location.js');
var s = document.getElementById('your-script-id');
s.parentNode.insertBefore(your-script-id, s);
})();
</script>
1 Comment
mcbeav
sorry that doesn't exactly answer the question, but a few before me have answered it, Query must be loaded in order to load a script, it will load it asynchronously, but jQuery must be loaded first, this script will load an external script asynchronously without jQuery.
<script>tag. If you give more context information, you will get better answers.