performance - How to structure JavaScript loading and deps? -
i have lots of javascript on site, including jquery, jquery ui (autocomplete), ads, social widgets, internal scripts, metrics (like ga) , on. structure how resources being loaded (from top priority lowest):
- jquery & jquery ui enable auto-complete;
- internal scripts;
- ads;
- metrics;
- social widgets.
currently moved scripts bottom , loading them async (except jquery isn't handling onload if async-loaded). load js stuff after content, loaded in specific order.
what industry-grade solution task?
load javascript.js ou wanted :
function include(src){ var scriptelem = document.createelement('script'); scriptelem.setattribute('src',src); scriptelem.setattribute('type','text/javascript'); document.getelementsbytagname('head')[0].appendchild(scriptelem); }; // import random query parameter avoid caching function includenocaches(src){ var ms = new date().gettime().tostring(); var timer= "?" + ms; include(src + timer); } //simple use : if (myfunction){ // loaded } else{ // not loaded yet include('http://siteweb.com/myfile.js'); }
you can using yui compressor compress javascript command line or run jslint http://www.jslint.com/ ...
Comments
Post a Comment