Question

I want to mimick this behavior:

<script src="console.log.1.js"></script>
<script>console.log(2)</script>
<script>console.log(3)</script>

That logs out:

1
2
3

Doing this doesn’t work:

<script>
var x = document.createElement("script");
x.src = "console.log.1.js";
x.async = false;
x.defer = false;
document.body.appendChild(x);
console.log("2");
console.log("3");
</script>

It logs out:

2
3
1

The only way I found so far to achieve it:

<script>
document.write("<scrip" + "t src='console.log.1.js'></scrip" + "t>");
</script>
<script>
console.log("2");
console.log("3");
</script>

Is that really the only way to force synchronous loading of external scripts in all browsers? Why doesn’t setting async=false, defer=false work?

UPDATE

FYI, if someone is wondering, the following document.write inception works (in Chrome..):

<script>
  // http://jsbin.com/avatiw logs "during"
  document.write('<scrip' + 't>console.log("before");document.write("<scrip" + "t src=\\"http://jsbin.com/avatiw\\"></scrip" + "t>");</scrip' + 't>');
  document.write('<scrip' + 't>console.log("after");</scrip' + 't>');
</script>

Works and logs out:

"before"
"during"
"after"

Answer 1

Yes, that’s the only way to force the script to load during the page parsing. Or at least, the only way I’d be willing to believe worked well cross-browser.

If your script were like this, I could see your thinking:

<script>
var x = document.createElement("script");
x.src = "console.log.1.js";
x.async = false;
x.defer = false;
document.body.appendChild(x);
</script>
<script><!-- note the new script element -->
console.log("2");
console.log("3");
</script>

…because in theory, when the parser hits the script element, it suspends everything (because there might be document.write statements) and calls into the JavaScript layer. So you might think, well, adding a script element to the end of the body at that point would insert it between the two.

But adding a script element via appendChild is just fundamentally different, it’s by nature an asynchronous operation (your code continues while the script is being downloaded, which is not the case with script elements in the markup barring the defer or async attributes). I can’t point at any one spec to say why, but the behavior you’re seeing is exactly what I’d expect. The treatment of script elements inline with the markup is a bit special.

We can see that it’s the download that’s the issue — at least in Chrome — by comparing the result with using a script element with inline content.

Using an external file (live copy | live source):

<script>
console.log("before");
(function() {
    var s = document.createElement("script");
    s.src = "http://jsbin.com/avatiw"; // Logs the word "during"
    document.body.appendChild(s);
})();
</script>
<script>
console.log("after");
</script>

Result:

before
after
during

Using inline script (live copy | live source — note that I’ve made no attempt to make this cross-browser, it works in Chrome and Firefox as they support the text property on script elements):

<script>
console.log("before");
(function() {
    var s = document.createElement("script");
    s.text = "console.log('during');";
    document.body.appendChild(s);
})();
</script>
<script>
console.log("after");
</script>

Output:

before
during
after