optimization - What is the most ideal way of loading javascript files? - Stack Overflow

admin管理员组

文章数量:1410674

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/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.

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/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.

• javascript
• optimization

Share Improve this question Follow edited Dec 21, 2011 at 12:30 asked Dec 21, 2011 at 9:03 user441407user441407 4

• Most ideal way? There is only one way to choose from. – bezmax Commented Dec 21, 2011 at 9:06
• You said you've read nczonline/blog/2009/07/28/… -- have you tried YUI Loader? Did it fit your needs? If not; why? – Peter-Paul van Gemerden Commented Dec 21, 2011 at 9:29
• @PPvG I haven't used YUI loader because I dont want to use 3rd party js to load my own js files. – user441407 Commented Dec 21, 2011 at 12:27
• @abhishekoza I've amended my answer based on your edit. – Stephen Commented Dec 21, 2011 at 13:18

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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 mon 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>

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./ 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./b/kristoffer/archive/2006/12/22/loading-javascript-files-in-parallel.aspx

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

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.

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.

The Best Answer Can Be Found Here:Here:http://www.html5rocks./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./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./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./1.js"></script>
<script src="2.js"></script>`

本文标签： optimizationWhat is the most ideal way of loading javascript filesStack Overflow