Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

are external javascript files loaded sequentially or parallel?

Tags:

javascript

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?

like image 951
clamp Avatar asked Nov 17 '11 09:11

clamp


People also ask

How is an external JavaScript loaded into a document?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

In what order is JavaScript loaded?

The browser loads them in parallel and it is free to run them in whatever order it wants. There is no predictable order among multiple async things.

Does the order of JavaScript files matter?

If I'm understanding your question I think you're asking if it matters where in a file a function/method is defined, and the answer is no, you can define them anywhere in a single source file. The JavaScript parser will read in all symbols before trying to run the code.

What type of files are external JavaScript files?

External JavaScript JavaScript files have the file extension .js.


4 Answers

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

So yes, you can rely on the order.

like image 51
Thilo Avatar answered Oct 02 '22 14:10

Thilo


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

like image 45
jAndy Avatar answered Oct 02 '22 14:10

jAndy


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.

like image 24
Peter O. Avatar answered Oct 02 '22 15:10

Peter O.


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.

like image 30
Moe Sweet Avatar answered Oct 02 '22 16:10

Moe Sweet