Absolute fastest way to load jQuery plus library_问答_开发者

Absolute fastest way to load jQuery plus library

开发者 https://www.devze.com 2023-01-23 03:24 出处：网络

So I\'m looking for the absolute, fastest way to perform the following: Load jQuery Load my-lib开发者_运维知识库rary.js

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

Load jQuery
Load my-lib开发者_运维知识库rary.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...

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.

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.

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.

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.

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

Absolute fastest way to load jQuery plus library

精彩评论

关注公众号

热门标签

图文推荐

Absolute fastest way to load jQuery plus library

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：