are external javascript files loaded sequentially or parallel?

Question

if i have multiple script tags in my page like:

    <script src="js/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="js/jquery.jplayer.min.js" type="text/javascript"></script>
    <script src="js/globals.js" type="text/javascript"></script>
    <script src="js/sound.js" type="text/javascript"></script>

can i rely on the fact that code from the previous ones is already available when the latter ones are loaded?

It seems worth mentioning, on top of the correct answers below, that a script can "break" the execution order by introducing asynchronous code. For example, if the first of your scripts contained a line setTimeout(function(){ alert("Hello"); }, 0);, that alert would appear after the other scripts have been loaded. In fact, after the whole HTML has been loaded. — Carsten Führmann
– Carsten Führmann, Commented Apr 8, 2017 at 21:27

Thilo · Accepted Answer · 2011-11-17 09:54:01Z

9

They may be loaded (via the network) in parallel, but they are evaluated in sequence.

So yes, you can rely on the order.

answered Nov 17, 2011 at 9:54

Thilo

264k107 gold badges527 silver badges674 bronze badges

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

Comments

jAndy · Accepted Answer · 2011-11-17 10:05:07Z

Short: Yes:

Without specifying defer or async properties within the script tag, the spec says, that a browser has to sequentially (sync) load those files.

In other words, a plain script tag which a browser finds needs to get

loaded
executed
(block any other render/execution process while doing the above)

While a "modern" browser probably still trys to optimize that process, those steps need to be applied (at least, process-like). That is the reason why you should place script tags without further specification always at the bottom of your <body> tag. Even the DOM render process stops while loading/executing scripts.

To avoid that, you can specify a defer or async (HTML5 only) property in those script tags, like

<script defer src="/foo/bar.js"></script>

that tells the browser it is a script that meant to be executed after the document has been parsed.

See https://developer.mozilla.org/En/HTML/Element/Script

Peter O. · Accepted Answer · 2011-11-17 10:01:19Z

5

In general, scripts are downloaded sequentially (see this page):

Because JavaScript code can alter the content and layout of a web page, the browser delays rendering any content that follows a script tag until that script has been downloaded, parsed and executed. However, more importantly for round-trip times, many browsers block the downloading of resources [such as stylesheets, images, and other scripts] referenced in the document after scripts until those scripts are downloaded and executed.

edited Nov 17, 2011 at 10:01

answered Nov 17, 2011 at 9:54

Peter O.

33.1k14 gold badges86 silver badges97 bronze badges

1 Comment

Thilo Over a year ago

"many browsers block the downloading of resources until after the script is executed": I think many recent browsers do pre-fetch other resources, though (assuming that regardless of the outcome of the script, they will eventually be needed).

Moe Sweet · Accepted Answer · 2011-11-17 09:53:45Z

3

They are loaded in parallel but they run only once every file have been loaded. So the answer is yes, you can rely on the fact.

answered Nov 17, 2011 at 9:53

Moe Sweet

3,7013 gold badges37 silver badges46 bronze badges

Collectives™ on Stack Overflow

are external javascript files loaded sequentially or parallel?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related