Javascript Async=true Attribute

Question

I see this code sample in a certain unnamed vendor's documentation. It appears to load a script asynchronously, then invoke a function from it thereafter. I realize that the if-undefined check will prevent an overt error, but is this not totally incorrect?

I believe that in IE8/9 it will work properly but block execution until the LOADER_URL script loads and executes; and I believe in many other browsers that do support the async attrbute, this will simply result in the inline-block executing the code inside the if-block only part of the time. The documentation states "tags are asynchronous and do not slow the loading of your pages."

<script type="text/javascript" src="LOADER_URL" async="true"></script>
<script type="text/javascript">
if (typeof (OBJECT_DEFINED_IN_LOADER_URL) != "undefined") { OBJECT_DEFINED_IN_LOADER_URL.Load(false); }
</script>

Looking at an earlier version of their documentation, it did not have the suggestion of the async attribute and did not make this claim. Did some technical writer make a mistake and say "yeah, that'll work" without testing adequately in all browsers? In IE <= 9 it will work all the time. And since async code is uber-fun to debug ... maybe it worked for them ...

That's my suspicion :)

Answer 1

Whether this makes sense heavily depends on the structure of the code.

You have to keep in mind that the browser caches certain files (and this includes scripts). Your scripts seems to be some kind of Library which loads required resources on demand (perhaps something similar like require.js), so this async code may make perfect sense, if the browser has everything in cache ( = the object is already there) to just interrupt the loading process.

Answer 2

"Async=true", when supported by browser, basically means: browser will load script asynchronous and will execute it when it prefer.
So there is no garantee that the second script will be executed after the first one.

You can safely use "asynch js load" only if you don't have, in page, any other code directly using objects you are loading in the asynch script.

I have evidence of all that, because I made a similar error in one of my project, but it will not be easy to replicate via fiddler or something similar.

So the code as proposed in the question will work sometime yes, sometime not.

Answer 3

As described here, it is New in HTML5: async attribute assigned by 'async' as its value Specifies that the script that is executed asynchronously (only for external scripts).

I found no problem so far on my site with this code in any browsers to call external script:

function include(src, attr, value)
{
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.setAttribute(attr, value);
    script.async = 'async';
    script.src = src;
    head.appendChild(script);
}

include('LOADER_URL', 'custom-attr', 'custom-value');

Answer 4

You were correct to be suspicious. The posted code is pretty much guaranteed to not work as intended in browsers supporting the async attribute.

Basically there are 3 "modes":

1. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available.
2. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing.
3. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

Source: http://www.w3.org/html/wg/drafts/html/master/scripting-1.html

Note: The async attribute value is ignored, the mere presence of the attribute indicates that the script should be executed asynchronously. So setting the value to false will still be the same as setting it to true.

Answer 5

if async is true

The script will be downloaded and executeed as soon as possible and HTML page will be parsing simultaneously

in case of async is false

The process of script downloading and execution will be carried out before starting of any HTML page parsing hence HTML pasing will halt while script is downloaded and executed first.