Search code examples
javascriptajaxdocumentfragment

Loading JS File - Directly into Document vs DocumentFragment


I was wondering what benefits or differences there were in these two different methods of AJAX external file loading

Example 1 - Loads file into document directly

(function () {
    var s = document.createElement('script'); 
    s.type = 'text/javascript'; 
    s.async = true; 
    s.src = '/myjs.js';
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);
})();

Example 2 - Loads file into documentFragment then adds fragment to document

(function(d, s) {
    var j, h = d.getElementsByTagName(s)[0],
        f = d.createDocumentFragment(),
        add = function(u, i) {
            if (d.getElementById(i)) {
                return;
            }
            j = d.createElement(s);
            j.src = u;
            i && (j.id = i);
            f.appendChild(j);
        };

    add('/myjs.js');
    h.parentNode.insertBefore(f, h);
}(document, 'script'));

Any true difference or benefit one vs other?


Solution

  • According to Josh Resig, using document fragments can speed up your application 2-3x, he set up a demo where you can see how much time is used to finish the task in milliseconds.

    http://ejohn.org/apps/fragment