CODEWITHSUNDEEP
javascriptoptimization
user441407
user441407

Reputation:

What is the most ideal way of loading javascript files?

What is the most ideal way of loading javascript files? Also, I want to make sure that order of the javascript files should be maintained. If I have

<script src="javascript1.js">
<script src="javascript2.js">

on my page, then javascript1.js should load before javascript2.js

Thanks.

EDIT: Thank you for your answers, but mine question is not only related with the order of js files. I want to load js files as quickly as possible without using any 3rd party js library. The solution which is similar can be found at www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/, but using this does not guarantee the order of the files for me, atleast.

Upvotes: 1

Views: 3794

Answers (6)

Koustav Ray
Koustav Ray

Reputation: 1142

The Best Answer Can Be Found Here:Here:http://www.html5rocks.com/en/tutorials/speed/script-loading/

Ideally do this if you need to load them in some particular order (In case of dynamically added scripts):

`

['//other-domain.com/1.js',
  '2.js']
   .forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});

`

And this for no order:

`

['//other-domain.com/1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  document.head.appendChild(script);
});

`

But if you just need static scripts then just ado this at the end of your body as suggested by many others:

`<script src="//other-domain.com/1.js"></script>
<script src="2.js"></script>`

Upvotes: 0

Stephen
Stephen

Reputation: 1737

As others have said, the scripts are loaded in order of placement on the page (unless they are wrapped in javascript to be loaded in later)

Putting the script tags at the bottom of the page can assist with the loading process for both old and new browsers. Although some scripts might (like modenizer) need to be loaded earlier on in the process. A good example can be seen at http://html5boilerplate.com/ on the index code sample.

Edit:

Following your edit, there is this info which can help

<script type="text/javascript">
  document.writeln("<script type='text/javascript' src='Script1.js'><" + "/script>");
  document.writeln("<script type='text/javascript' src='Script2.js'><" + "/script>");
</script>

The full documentation on this can be read here (including crevets of other methods) http://blogs.msdn.com/b/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx

Upvotes: 2

matpol
matpol

Reputation: 3074

There is a school of thought that using parallel loading is good. This means the scripts are loaded like the GA snippet provided by google by using JS. A good way of doing this is to use modernizr. This script enables you to load the scripts when they are needed. You would need to include the modernizr script in the traditional way and then write some JS to load the other script when required.

Upvotes: 0

Guffa
Guffa

Reputation: 700162

There is no single "best" way of loading Javascript files. Different ways work best in different scenarios.

The normal way of loading Javascript files is to put the script tags in the head tag.

You can put some script tags inside the body tag instead, to make them load later. One common reason for this is to make the content of the page display without having to wait for the script to load.

The scripts are executed in the way that the tags are placed in the code. The execution of the code below a script tag waits for the Javascript to be executed first.

In your question you say that you want one script to load before the other, which can't be guaranteed by just using script tags in the code. Then you would have to generate the second script tag in the first Javascript and use document.write to put it in the page. To make the scripts execute in that order, you can just use your script tags the way that you do, and the order is guaranteed.

Note: You should specify the type attribute in the script tags, so that the tags validate without errors. You need to include the closing tag for the script tags.

<script type="text/javascript" src="javascript1.js"></script>
<script type="text/javascript" src="javascript2.js"></script>

Upvotes: 3

Rich O&#39;Kelly
Rich O&#39;Kelly

Reputation: 41757

Your web browser will execute javascript files in the order they are declared, so in your example:

<script src="javascript1.js">
<script src="javascript2.js">

javascript1.js will be executed before javascript2.js.

As for the most ideal way, this is all very subjective. I prefer progressive enhancement when using javascript so declare my javascript as the last element on a page, since it is not required for the site to function, any user can see the content and use the site even while the javascript is downloading.

I also prefer bundling all my scripts together, in a minified form, so the browser only has to make one request to get my javascript.

Upvotes: 0

Sekhar
Sekhar

Reputation: 21

HTML is a top down procedural language so anything that is posted first gets executed first. Hence the order which you wrote is correct.

Upvotes: 1

Related Questions