11

I have heard and read a few articles about deferring JavaScript loading and am very interested. It seems to be very promising for web apps that may be useful on Mobile platforms where the amount of JavaScript that can be loaded and executed is limited.

Unfortunately, most of the articles talk about this at an extremely high level. How would one approach this?

EDIT

Normally, all JavaScript is loaded on page load, however, there may be functions that are not necessary until a certain action occurs, at which time, the JavaScript should be loaded. This helps ease the burden of the browser on page load.

Specifically, I have a page that very heavily uses JavaScript. When I load the page on my phone, it won't load properly. As I debugged the page, I eliminated some of the JS functions. Once enough was eliminated, the page suddenly worked.

I want to be able to load the JS as needed. And possibly even eliminate the functions simply used for start up.

Improve this question
1
  • are you trying to delay the loading of javascript code execution or the browser loading a js file? If the former then jquery.ready function would do what you want Commented Sep 1, 2011 at 14:58

4 Answers 4

Reset to default
4

The basics are simple - breaking up your JavaScript code into logically separate components and loading only what you need. Depending on what you are building you can use:

Loaders:

Dependency managers (which are also loaders):

These tools make use of a wide variety of techniques to defer the loading of scripts, the execution of scripts, manage dependencies, etc. What you need depends on what you are building.

You may also want to read through this discussion to learn something more about the pros and cons of using such techniques.

Response to edit:

There isn't really a good way to unload JavaScript that you have already loaded - the closest approximation you can get is to keep all of your loading code namespaced inside your application's namespace and then "clean up" by setting that namespace, and all references to it to null.

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

2 Comments

if you use an AMD or commonJS approach (requirejs and backdraft use AMD) then the loaded JS is bound to a local variable. When that goes out of scope, as long as you don't keep any references, it gets garbage collected, so the structure of your code can manage how your packages are kept around.
This comment is slightly misleading, so I thought I'd clarify. CommonJS and AMD do nothing special to help your code garbage collect. At best the callback function in AMD is a closure, and so all your variables are scoped to that closure for potential garbage collection (assuming you haven't exposed any functions that may be holding the closure's function call's context. This is no different than using an IIFE like most people do in their code. By IIFE, I mean wrapping your code in (function() { ...your code here... }());
1

I have used a simple script published on line with some modification done by me. Assume that your COMPRESSED Javascript file is in the cache directory in your webserver and you want to defer the loading of this compressed js file.

Your compressed js file:

80aaad2a95e397a9f6f64ac79c4b452f.js

This is the code html code:

<script type="text/javascript" src="/resources/js/defer.js?cache=80aaad2a95e397a9f6f64ac79c4b452f.js"></script>

This is the defer.js file content:

(function() {

    /*
     * http://gtmetrix.com/
     * In order to load a page, the browser must parse the contents of all <script> tags, 
     * which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, 
     * and deferring parsing of unneeded JavaScript until it needs to be executed, 
     * you can reduce the initial load time of your page.
     */

    // http://feather.elektrum.org/book/src.html
    // Get the script tag from the html
    var scripts = document.getElementsByTagName('script');
    var myScript = scripts[ scripts.length - 1 ];

    // Get the querystring
    var queryString = myScript.src.replace(/^[^\?]+\??/,'');

    // Parse the parameters
    var params = parseQuery( queryString );

    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '/cache/' + params.cache; // Add the name of the js file 

    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);

    function parseQuery ( query ) {
       var Params = new Object ();
       if ( ! query ) return Params; // return empty object
       var Pairs = query.split(/[;&]/);
       for ( var i = 0; i < Pairs.length; i++ ) {
          var KeyVal = Pairs[i].split('=');
          if ( ! KeyVal || KeyVal.length != 2 ) continue;
          var key = unescape( KeyVal[0] );
          var val = unescape( KeyVal[1] );
          val = val.replace(/\+/g, ' ');
          Params[key] = val;
       }
       return Params;
    }
})();

I would like to say thanks to http://feather.elektrum.org/book/src.html that helped me to understand how to get the parameters from the script tag.

bye

Improve this answer

Comments

0

Deferring loading til when? The reason typically why JS is loaded last, is so that the entire DOM has been loaded first.

An easy way is to just use

<body onload="doSomething();">

So you could easily have doSomething() function to load all your JS.

You can also add a function to window.onload, like

window.onload = function(){ };

Also, if you are using JS librarys, such as jQuery and Dojo, they each have their own onReady and addOnLoad methods in order to run some JS only after the document has already loaded.

Improve this answer

Comments

0

Here's a useful article on the script element's defer and async attributes. Specifying these attributes will get the browser to defer loading in different ways. You can also load in an external script using JavaScript after page load.

It should also be noted that the position of your script elements within your HTML document will determine load and execution order if neither defer nor async have been specified.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.