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?
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.