CODEWITHSUNDEEP
javascripthtml
NibblyPig
NibblyPig

Reputation: 52952

Do external javascript references cause the browser to wait until they are downloaded?

When your page is being parsed, and it comes across a <script src='someExternalSite/jquery.js'></script> or whatever, does the page wait until that file is downloaded and available before continuing to parse?

Added:

Do most browsers simultaneously download all the scripts to save time (even if they execute them in order)?

Upvotes: 5

Views: 461

Answers (5)

Martin Algesten
Martin Algesten

Reputation: 13620

Yes it will block and the script will only be executed when other scripts before that are loaded.

E.g.

<script src='someExternalSite/script1.js'></script>
<script src='someExternalSite/script2.js'></script>

Most browsers will try to speed things up by loading these two scripts in parallel. Even if script2.js is loaded before script1.js, they won't execute until both are loaded.

I recently ran into trouble with this. So I elaborate a couple of related points.

document.write() forces the parser to stop, and inserting the script this way will still execute sequentially (script1.js before script2.js):

   document.write('<script src=\'someExternalSite/script1.js\'></script>');
   document.write('<script src=\'someExternalSite/script2.js\'></script>');

Finally, you can get completely asynchronous loading by doing:

var script1 = document.createElement('script');
script1.src = 'script1.js';
document.getElementByTagName('body')[0].appendChild(script1);    

var script2 = document.createElement('script');
script2.src = 'script2.js';
document.getElementByTagName('body')[0].appendChild(script2);

The final one is very fast, since the scripts are loaded completely in parallel, but there's a big gotcha. For Webkit based browsers, the order is NOT guaranteed, script2.js will be executed before script1.js if it is loaded first. If you can work around that, say having all scripts in one javascript file, then this method is great.

Dynamic script addition should be ordered?

Upvotes: 2

James
James

Reputation: 3275

does the page wait until that file is downloaded and available before continuing to parse?

Not only does it wait until the JS has been downloaded, it waits until it has been parsed and executed. The others advice about putting it at the end of page is spot on.

Do most browsers simultaneously download all the scripts to save time (even if they execute them in order)?

Actually, I think only the newer ones do. I came across a webpage about this ages ago that I didn't bookmark, sorry.

Upvotes: 2

alex
alex

Reputation: 490433

Yes, that is why people recommend adding scripts just before the </body> tag, or using the defer attribute.

Upvotes: 0

Thariama
Thariama

Reputation: 50832

All main browsers should try to get those files synchronously cause the next script in the list could rely on the one right before.

Upvotes: 0

Amit Singh
Amit Singh

Reputation: 1746

each tag blocks the page from further rendering until the js file fully downloaded. Its a good idea to place js file in end of body tag

Upvotes: 2

Related Questions