1

I know that in general, the scripts are loaded and executed in the order. But I have a problem that they are not executed in the right order, sometime the second script is executed and then the first script.

I am using jsp and tile. In the jsp template, I only load the common js files and then load specific js files for specific tile

It seems like browser loads and executes the scripts asynchronously

How to force it to load and execute scripts sequentially?

I've searched a lot of places for the answer but not work.

Template:

<html>
    <head>
    <title></title>
    //load common js files
    </head>
    <body>
    <tiles:insert attribute="header"/>
    <tiles:insert attribute="content"/>
    <tiles:insert attribute="footer"/>
    </body>
</html>

Specific tile:

<div>
    Test
</div>
//load js files
<script type="text/javascript" src="1.js"></script>
<script type="text/javascript" src="2.js"></script>
<script type="text/javascript" src="3.js"></script>

Edit:

These javascript files are very simple, they just print out number 1,2 and 3

But sometime It prints the wrong order.

The "content" div will be replaced by the tile and I don't know whether it is a type of loading resource dynamically: Dynamically loading JavaScript synchronously

Community
  • 1
  • 1
sharon
  • 135
  • 1
  • 7
  • 4
    JavaScript files *are* executed sequentially in modern browsers. Your assumptions are wrong. http://stackoverflow.com/a/8996894/229044 – user229044 Dec 30 '14 at 07:20
  • Is there any chance that the scripts themselves are altered by the server-side? Have you checked how the files look in the browser? Maybe they're altered in a way that they execute later, like script-loaders? – Joseph Dec 30 '14 at 07:30
  • 2
    Can you please post why you think that the browser is executing scripts asynchronously? Are you getting any errors? Browsers can download the scripts in parallel but will execute them one after each other. – Wayne Ellery Dec 30 '14 at 07:41
  • I have got similar issues mostly occuring on safari 8.0.0 and 6.0.0. A huge dependencies package file is included at the end of the header and another script at the end of the page use jQuery included in the first package. I received an error JQuery is not defined. No async or defer in my case. Those are not dynamic insertion but simple script tags. – svassr Aug 31 '15 at 19:37

1 Answers1

0

There is a great article on html5rocks about script loading.

http://www.html5rocks.com/en/tutorials/speed/script-loading/

the simplest way would be to use defer but it's not supported by IED<10 and opera mini.

<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>
  • Spec says: Download together, execute in order just before DOMContentLoaded. Ignore “defer” on scripts without “src”.
  • IE < 10 says: I might execute 2.js halfway through the execution of 1.js. Isn’t that fun??

The ultimate solution but less supported would a combination of dynamic inclusion and forcing async attribute to false.

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

it requires a work around using onreadystatechange on IE<10

svassr
  • 5,538
  • 5
  • 44
  • 63