JavaScript - order of execution of <script> tags

Question

As stated in this SO question and many other similar, the order of execution of <script>s on the page should be the same as the order in which these tags are defined in the html document.

I created a simple Java (server side) test app that allows to execute a request and wait specified period of time before returning a response (relevant code snippet at the bottom of this question). It has a simple API:

http://localhost:8080/latency?time=XXX&response=YYY

Example request that will return console.log('done') after one second (1000ms):

http://localhost:8080/latency?time=1000&response=console.log(%27done%27)

Next I created a simple index.html page (served by nginx):

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>test order</title>
    </head>
    <body>
        <script type="text/javascript" async=false src="http://localhost:8080/latency?time=1000&amp;response=console.log(%27done1%27)"></script>
        <script type="text/javascript" async=false src="http://localhost:8080/latency?time=100&amp;response=console.log(%27done2%27)"></script>
        <script type="text/javascript" async=false src="http://localhost:8080/latency?time=10&amp;response=console.log(%27done3%27)"></script>
        <script>console.log('static script without "src" attr');</script>
    </body>
</html>

According to everything I read so far I expected the order of console output to be:

done1
done2
done3
static script without "src" attr

This is what I got (Firefox 51 dev console):

This is just the opposite order of what I expected to get. Am I missing something? Is there a way to execute these scripts in the desired order (i.e. in the order they are defined in HTML)?

As a reference, the Java part on a server side:

private String latency(HttpServletRequest request) {

    long millis = Long.parseLong(request.getParameter("time"));
    String response = request.getParameter("response");

    try {
        Thread.sleep(millis);
        return (response != null) ? response : "";
    } catch (InterruptedException e) {
        throw new RuntimeException(e);
    }
}

async="false" makes it asynchronous. Remove these attributes. — user2345
– user2345, Commented Feb 10, 2017 at 2:13
Did you put async puposefully?. Try without async attribute. Also try the same in different browsers. — Mohammed Shareef C
– Mohammed Shareef C, Commented Feb 10, 2017 at 3:22

Marat Tanalin · Accepted Answer · 2017-02-10 02:13:02Z

5

async is a boolean attribute. Its value does not matter. Remove the attribute.

answered Feb 10, 2017 at 2:13

Marat Tanalin

14.2k1 gold badge38 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

JavaScript - order of execution of <script> tags

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related