There are several techniques to download external javascript asynchronously, and there are several techniques for coupling asynchronous download with inline code to preserve execution order.
But I have a couple of questions that I'd be most grateful if someone with a good understanding of this area was able to answer please.
The first question is more just checking that controlling the execution of inline code is as obvious as I think it is.
Say I have this:
inline-script-1 (script I have no control over)
inline-script-2 (my script)
where inline-script-2 is code that I can add to a page, but inline-script-1 is not under my control (please, no 'why not' type questions to this - it's just the way it is for reasons I won't bloat this post any further with).
Say inline-script-2 cannot be executed before [asynchronously downloaded] external script A.js has loaded. That's fine - create a script tag with src=A.js and insert it into the document, and also change inline-script-2 to be executed on the onload/onreadystatchange of A.js. So I now have:
inline-script-1
create 'script' element
set the script's src attribute
set the script's onload/onreadystatechange handlers to functions that call a function in A.js - A-func1()
dynamically add script to page
Now when the asynchronous download of A.js is finished, A-func1() will be called.
But if I want to ensure that inline-script-1 has run before inline-script-2, then is that guaranteed just from the order in the page? Do all browsers parse the page in a strict top to bottom way, therefore guaranteeing that inline-script-1 will be executed before the call to the function A-func1() ?
The second question is how to include more than one block of inline code on a page. For example:
inline-script-1 (script I have no control over)
inline-script-2 (my script)
inline-script-3 (script I have no control over)
inline-script-4 (my script)
I can't really employ the same strategy as in the first question because I'd imagine I would not want to reference the external script twice as it may then be downloaded (ignore caching) and executed twice.
inline-script-1
(function() {
create 'script' element
set the script's src attribute
set the script's onload/onreadystatechange handlers to functions that call a function in A.js - A-func1()
dynamically add script to page
})();
inline-script-3
inline-script-4: <not sure what to do here>
I can't just call functions in A.js above as I don't know it has loaded yet. I don't really want to add a script onload handler at that point either because it means polluting the global namespace and there is no guarantee that I wouldn't miss the event being fired anyway depending on how long inline-script-3 takes. And I can't really repeat the anonymous function block again for the reasons already mentioned.
Also, inline-script-3 may get run before the call to A-func1()
Is there any way to preserve execution order in this case? I'm wondering if I can maybe make use of the new async attribute? If I set the async attribute to false in the created script element in the anonymous function, and leave the inline-script-4 as inline code but also add the async with value false attribute, might that work?
Thanks,
Paul
