Home/ Questions/Q 9116123
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T04:35:45+00:00

I want to load a non-blocking javascript on my page. Before async is supported,

  • 0

I want to load a non-blocking javascript on my page. Before async is supported, the best practice seems to dynamically load it via a simple script.

Here is an example that works fine in which it is inserted before the first <script>:

var myscript = document.createElement('script');
myscript.async = true; // cannot hurt, right?
myscript.type = 'text/javascript';
myscript.src = 'myscript.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(myscript, node);

I found several versions inserting the script in different places like the end of <head> or the <body>:

document.getElementsByTagName("head")[0].appendChild(myscript);  
document.getElementsByTagName("body")[0].appendChild(myscript);

The order seems to matter in some browsers though it is asynchronous.
Are there any difference in terms of browser support? performance? blocking risk?

I don’t have any constraint in terms of order (they don’t impact each other) but I want to make sure that if my script takes too long to load the page content will still load just fine. I would think the last solution works best but I am not sure of the differences.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Appending the scripts at the end of the body is the best solution here. It still allows for loading the DOM without blocking for the script tags. Also if you put your scripts at the end of the document you no longer need to wrap your functions in a DOM ready event because at the moment your scripts start executing the DOM will already be loaded by the browser and you could directly start manipulating it or subscribing to some events.

    • 0