Preload script without execute

Question

Problem

In order to improve the page performance I need to preload scripts that I will need to run on the bottom page.

I would like to take control of when the script is parsed, compiled and executed.

I must avoid the script tag, because it is blocker for common render engines (geeko, etc).

I can't load it using defer property, because I need to control when the script is executed. Also, async property is not a possibility.

sample:

<html><head>
//preload scripts ie: a.js  without use the script
</head><body> ..... all my nice html here
//execute here a.js
</body></html>

This allows me to maximize the render performance of my page, because the browser will start to donwload the scripts content, and it will render the page at the same time in parallel. Finally, I can add the script tag, so the browser will parse, compile and execute the code.

The only way that I could do that is using a hidden image tag. (This is a simplified version of Stoyan)

i.e.

 <html><head>
 <img src="a.js" style=display:none;>
</head><body> ..... all my nice html here
 <script src="a.js">  
</body></html>

Question

I didn't find any problem using this technique, but does anyone know a better way to do this? Is there any meta prefetch?

Additional information

I'm using requirejs, so I'm trying to preload the modules code, without executing it, because this code depends of DOM elements.

What is "commons render engine" and why must you avoid script tags? Why not put the script you want to run into a function and then execute that function when the DOM has loaded using jQuery? — Sani Huttunen, Jun 19 '12 at 14:06
@SaniHuttunen:I've added info, The scrips are requirejs modules, and I'm loading requirejs lib at bottom. — Martin Borthiry, Jun 19 '12 at 16:24
@ŠimeVidas: that is true, but you can't control when the browser parse, compile and execute them. — Martin Borthiry, Jun 19 '12 at 16:25

Juicy Scripter · Answer 1 · 2012-06-19T14:30:45.360

6

With similar technique you may preload scripts and stylesheets using img for Internet Explorer and object tag for every other browser.

var isMSIE = /*@cc_on!@*/false;

var resources = ['a.js', 'b.js', 'c.css'];

for (var i=0; i<resources.length; i++){
  if (isMSIE){
    new Image().src = resources[i];
  } else {
    var o = document.createElement('object');
    o.data = resources[i];
    document.body.appendChild(o);
  }
}

There is a blog post describing such a technique and outlining caveats: Preload CSS/JavaScript without execution.

But why don't you want to just use dynamically added scripts just like suggested in other answer, this will probably lead to a cleaner solution with more control.

edited Jun 19 '12 at 14:30

answered Jun 19 '12 at 14:25

Juicy Scripter

25,778
6
72
93

Yea @Juicy, It seems to be the best approach to solve the problem. My version is a simplified copy of that script. Why no use dynamically added scripts? because, I would like to take control over when the script is parsed, compiled and executed. Do you know why is better use objects instead images on Non-IE browsers? – Martin Borthiry Jun 19 '12 at 16:31
1

Note this advice is old and doesn't work. Try and load a script tag with an object when the url has a xframe options of sameorigin and it breaks. Move it to image and it works. The issues listed in that post (it won't cache in FF, don't seem to apply anymore0 – dalore May 21 '15 at 10:58
I tried this approach, but I had issues with it. I have an Ember app, which consists of about 150 separate files, and with this many objects on the page, browser becomes extremely slow. Unfortunately, no-go for me. – Varis Vītols Sep 19 '18 at 09:18
Maybe this is of additional help? http://www.phpied.com/preload-cssjavascript-without-execution – Aug 08 '19 at 11:46

score 5 · Answer 2 · answered Aug 10 '16 at 13:25

5

You can use the prefetch attribute of a link tag to preload any resource, javascript included. As of this writing (Aug 10, 2016) it isn't supported in Safari, but is pretty much everywhere else:

<link rel="prefetch" href="(url)">

More info on support here: http://caniuse.com/#search=prefetch

Note that IE 9,10 aren't listed in the caniuse matrix because Microsoft has discontinued support for them.

More info here and more options for preloading, like prerender and more

answered Aug 10 '16 at 13:25

Brad Parks

66,836
64
257
336

1

Prefetch is only useful for the next page, not for current one. Therefore, if you suddenly need an additional JS module in your single-page app, it won't be available, and will need to be downloaded anyway. – Varis Vītols Sep 19 '18 at 09:13

score 1 · Answer 3 · edited May 23 '17 at 11:33

For each script you'd like to download without executing, make an object containing a name and a url, and put those objects into an array.

Looping through the array, use jQuery.ajax with dataType: "text" to download your scripts as text. In the done handler of the ajax call, store the text content of the file (which is passed in first argument) in the appropriate object, increment a counter, and call an "alldone" function when that counter is equal to the number of files you are downloading in this manner.

In the "alldone" function (or later) do the following: Loop through your array again, and for each entry, use document.createElement("script"), document.createTextNode(...), and (...scriptNode...).appendChild(...) to dynamically generate scripts having the intended source inline, rather than via "src" attribute. Finally, do document.head.appendChild(...scriptNode...), which is the point when that script is executed.

I have used this technique in a project where I needed to use frames, where several frames and/or the frameset need identical JavaScript files, in order to make sure each of those files is requested only once from the server.

Code (tested and working) follows

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <script id="scriptData">
            var scriptData = [
                { name: "foo"    , url: "path/to/foo"    },
                { name: "bar"    , url: "path/to/bar"    }
            ];
        </script>
        <script id="scriptLoader">
            var LOADER = {
                loadedCount: 0,
                toBeLoadedCount: 0,
                load_jQuery: function (){
                    var jqNode = document.createElement("script");
                    jqNode.setAttribute("src", "/path/to/jquery");
                    jqNode.setAttribute("onload", "LOADER.loadScripts();");
                    jqNode.setAttribute("id", "jquery");
                    document.head.appendChild(jqNode);
                },
                loadScripts: function (){
                    var scriptDataLookup = this.scriptDataLookup = {};
                    var scriptNodes = this.scriptNodes = {};
                    var scriptNodesArr = this.scriptNodesArr = [];
                    for (var j=0; j<scriptData.length; j++){
                        var theEntry = scriptData[j];
                        scriptDataLookup[theEntry.name] = theEntry;
                    }
                    //console.log(JSON.stringify(scriptDataLookup, null, 4));
                    for (var i=0; i<scriptData.length; i++){
                        var entry = scriptData[i];
                        var name = entry.name;
                        var theURL = entry.url;
                        this.toBeLoadedCount++;
                        var node = document.createElement("script");
                        node.setAttribute("id", name);
                        scriptNodes[name] = node;
                        scriptNodesArr.push(node);
                        jQuery.ajax({
                            method   : "GET",
                            url      : theURL,
                            dataType : "text"
                        }).done(this.makeHandler(name, node)).fail(this.makeFailHandler(name, node));
                    }
                },
                makeFailHandler: function(name, node){
                    var THIS = this;
                    return function(xhr, errorName, errorMessage){
                        console.log(name, "FAIL");
                        console.log(xhr);
                        console.log(errorName);
                        console.log(errorMessage);
                        debugger;
                    }
                },
                makeHandler: function(name, node){
                    var THIS = this;
                    return function (fileContents, status, xhr){
                        THIS.loadedCount++;
                        //console.log("loaded", name, "content length", fileContents.length, "status", status);
                        //console.log("loaded:", THIS.loadedCount, "/", THIS.toBeLoadedCount);
                        THIS.scriptDataLookup[name].fileContents = fileContents;
                        if (THIS.loadedCount >= THIS.toBeLoadedCount){
                            THIS.allScriptsLoaded();
                        }
                    }
                },
                allScriptsLoaded: function(){
                    for (var i=0; i<this.scriptNodesArr.length; i++){
                        var scriptNode = this.scriptNodesArr[i];
                        var name = scriptNode.id;
                        var data = this.scriptDataLookup[name];
                        var fileContents = data.fileContents;
                        var textNode = document.createTextNode(fileContents);
                        scriptNode.appendChild(textNode);
                        document.head.appendChild(scriptNode); // execution is here
                        //console.log(scriptNode);
                    }
                    // call code to make the frames here
                }
            };
        </script>
    </head>
    <frameset rows="200pixels,*" onload="LOADER.load_jQuery();">
        <frame src="about:blank"></frame>
        <frame src="about:blank"></frame>
    </frameset>
</html>

other question closely related to above approach other related question

score 0 · Answer 4 · answered Jun 19 '12 at 14:08

Why not to try this?

var script = document.createElement('script');
script.src = 'http://path/to/your/script.js';
script.onload = function() {
  // do something here
}

document.head.appendChild(script);

you can use .onload event to control when it is loaded. One caveat is that .onload() doesn't work in IE and you can use this:

script.onreadystatechange = function() {
  if (/^loaded|complete$/i.test(this.readyState)) {
    // loaded
  };
}

Additionally adding scripts via DOM is non-blocking and i believe you can perfectly achieve your goals with this approach.

thanks, I knew that technique, but I need to control when the script is parsed and executed. — Martin Borthiry, Jun 19 '12 at 16:27

score 0 · Accepted Answer · answered Jun 19 '12 at 20:30

0

You should have a look at the following links:

http://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/

http://tomdale.net/2012/01/amd-is-not-the-answer/

And at how ember.js is using a tool called minispade and preprocessing with ruby to make the process of loading, parsing and running javascript modules fast.

answered Jun 19 '12 at 20:30

txominpelu

1,067
1
6
11

Nice articles, I'm doing something similar to lazy-evaluation,but in order to reduce the amount of http requests I have all modules in one optimized file. It is similar to this sample: Files = {}; Files['main.js'] = "require(\"controllers/app_controller.js\");"; Files['controllers/app_controller.js'] = "alert(\"Hello world!\");"; – Martin Borthiry Jun 19 '12 at 20:49
Then maybe you should consider rake pipeline. There's a project skeleton where they use minispade and rake papeline to generate one optimized file here: https://github.com/interline/ember-skeleton – txominpelu Jun 19 '12 at 20:58

score 0 · Answer 6 · answered Sep 08 '17 at 17:09

0

I've answered the same question there:

https://stackoverflow.com/a/46121439/1951947

just use the <link> tag to preload your script and then you can use it with the <script> tag

eg: <link href="/js/script-to-preload.js" rel="preload" as="script">

answered Sep 08 '17 at 17:09

raythurnevoid

2,652
1
25
24

Preload script without execute

Problem

Question

Additional information

6 Answers6

Linked

Related