Defer inline javascript execution? [duplicate]

Answer 1

You could simulate a defer by setting the type of the inline scripts to one that would not be processed by the browser like text/example, and the cloning those scripts at the end of the document replacing the type with text/javascript.

The code that processes all the text/examples is really simple:

window.addEventListener("load", function() {

    var arr = document.querySelectorAll("script[type='text/example']");
    for (var x = 0; x < arr.length; x++) {
        var cln = arr[x].cloneNode(true);
        cln.type = "text/javascript";
        document.querySelectorAll("body")[0].appendChild(cln);
    }

});

Or if you prefer to use jQuery (you'll have to add this script after including the jQuery file):

$(function() {
    $("script[type='text/example']").each(function() {
        $(this).clone().attr("type","text/javascript").appendTo("body"); 
    });
});

This code waits until the page has loaded, then selects all the scripts with type text/example, and copies them at the end of the body with a type of text/javascript so they are executed normally.

For example:

...


Page Title


...

Will result in these messages in the console:

I am after the h1

I am before the h1

You can see a running demo on this JSFiddle: http://jsfiddle.net/rqckwc79/

---

Pros of this solution:

• It is a cross-browser solution.
• The code is valid HTML/JavaScript.
• It works in strict mode.

Cons of this solution:

• You need to have control over the inline scripts to change the type.
• As troelskn said, performance would be worse than moving all the code to the bottom (but I understand there are situations in which that is not possible).
• It doesn't work on older IE versions (although the code could be modified to support them).