Hi all,
I'm interested in understanding the very basics of async scripts/files loading. In fact, I'd like to understand what I see in the Chrome web developer tools, on Timeline tabs.
I am currently interested in those topics, because I was using curl to load asynchronously my scripts : 5 smalls legacy scripts which I managed to convert to AMD modules. Then, I tried to look how those scripts were loaded in the Timeline of Chrome Debug Mode : I was expecting to see them loading in parallel, the async thing. But, instead I just saw them loading one after another. Maybe this can happen when scrips are to small (they're between 1 Ko and 5Ko)? They're not, at this moment, minified nor concatenated. See that image :
My code (in index.html) is like (I have no run.js file right now) :
var cfg = {
paths: {
jquery: {
location: 'app/js/vendor/jquery-1.9.0.min',
config: {
factory : function(){
return $;
}
}
},
curl : 'bower_components/curl/src/curl',
bootstrap: {
location: 'app/js/bootstrap/bootstrap',
config: {
loader: 'curl/loader/legacy',
factory: function() {
return;
},
requires: ['jquery']
}
},
initsimu: 'app/js/user/initsimu',
ui: 'app/js/user/ui',
connexion: 'app/js/user/connexion',
encaissement: 'app/js/user/encaissement',
validate: 'app/js/user/validate'
},
preloads: ['jquery']
};
// beforerun is just a small module that created the link element in the page. I will replace that with plugin css! from curl if I manage to settle point 2 of the question
curl(cfg, ['app/js/user/beforerun'], initiatePage, tellWhy)
.next(['bootstrap'])
.next(['initsimu', 'ui', 'connexion', 'curl/domReady', 'encaissement', 'validate'], actions, tellWhy);
// 'initsimu', 'ui', 'connexion', 'encaissement', 'validate are my modules
function initiatePage(BeforeRun) { BeforeRun.initPage();}
function tellWhy(ex) { console.error(ex.message); }
function actions(initsimu, ui, connexion, domReady, encaissement, validate) {
// do stuff
}
I manage to make things work, but is that correct ?
A note to what I see in the DOM after all that : only bootstrap.js is not async.
I tried a lot of possible ways to load bootstrap (version 2.2.1), but doing as I did way the only it worked (the factory option was a bit lucky for me).
Thank you for your help guys, and Bravo for these great tools!
Regards,
Johan Chouquet