Absolute fastest way to load jQuery plus library

Question

So I'm looking for the absolute, fastest way to perform the following:

Load jQuery
Load my-library.js
Execute some DOM manipulation

I'm finding lots of conflicting and out-dated information but so far I think I should be doing the following:

Prevent render blocking by doing some fancy script load deferring in the head (see Google Analytic's latest method).

Load jQuery from the Google CDN for increased chance of a cache hit.

Minimize and gzip my-library.js.

Use $(document).ready() to trigger the DOM manipulation.

Ok, go...

The *absolute* fastest way would be not to load jQuery... Ouch! — gblazex, Nov 01 '10 at 12:45

score 3 · Answer 1 · answered Nov 01 '10 at 12:09

You might find it is faster to load both your libraries in one request by combining and minifying them together. You'll have to measure the difference: Google's CDN will serve faster, but you're waiting for your own server anyway at step 2, so you might be better off skipping the CDN and getting it all from your server.

score 2 · Answer 2 · answered Nov 01 '10 at 12:10

2

If your looking to optimize your jQuery scripts you should check them with jQuery Lint. Or use the addon for firebug, FireQuery, which has Jquery Lint built in.

answered Nov 01 '10 at 12:10

red-X

5,108
1
25
38

score 0 · Answer 3 · edited Jul 15 '12 at 14:49

0

Using DOM for script nodes creation is the worst way, unsafe (because you will not sure to have the same behavior in all browsers, some can go parallel some async). Best way is to use a series of

document.write('<s'+'cript type="text/javascript" src="whatever you want"></s'+'cript>;' );

Scripts will be downloaded in parallel and then executed in the right order. (In the order you wrote them).

edited Jul 15 '12 at 14:49

Kijewski

25,517
12
101
143

answered Jul 15 '12 at 13:48

Michele Carino

1

2

"some can go parallel some async", you mean "some can go sequentially, some async", don't you? There is no parallel execution in JavaScript. – Kijewski Jul 15 '12 at 14:50

jasssonpet · Answer 4 · 2010-11-01T12:42:33.130

I am not sure, but you could do something like that in the <head>:

(function(w,d)
    var js = function(a,b){var c='script',s=d.createElement(c),t=d.getElementsByTagName(c)[0];s.async=true;if(b){if(s.readyState){s.onreadystatechange=function(){if(s.readyState==='loaded'||s.readyState==='complete'){s.onreadystatechange=null;b()}}}else{s.onload=function(){b()}}}s.src=a;t.parentNode.insertBefore(s,t)};
    js('//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js', function(){w.initPlugins&&w.initPlugins()});
    js('/js/plugins.js', function(){w.jQuery&&w.initPlugins()});
    js('//www.google-analytics.com/ga.js');
})(window, document);

You have to use an updated jQuery, because it could be loaded async. In your plugins.js (Closure compiled, gzipped):

window.initPlugins = function(){
   // plugin1
   // plugin2
   // plugin3
};

This will load the 3 files in parallel and execute them in the right order. I think that the absolute fastest way is to inline the files in the page, but they won't be cached (maybe that's the case).

P.S. You can cause an error dialog in IE6 if you use the protocol-relative URL for google analytics.

score 0 · Accepted Answer · edited May 23 '17 at 10:34

I think you have 2 options: You'll need and inline loader script.

Then you'll need to decide whether you want to 1) Combine all your javascript for each page into one file dynamically. The loader script then calls the relevent javascript file for the page being served. The file itself will be built dynamically using something like modconcat or local combo handler

2) Or take a parallel loading option managing dependencies with something like labjs.

Google analytics code and similar can be loaded after the page is loaded. All of this should be just inside the closing body tag, rather than the head as you mentioned.

For the best chance of loading Jquery quickly using a parallel approach, make sure to use a CDN, like the Google CDN for JQuery.

Absolute fastest way to load jQuery plus library

5 Answers5