7

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

Improve this question
7
  • any code you would like to share? Commented May 8, 2013 at 6:47
  • 2
    Sorry I forgot to escape the lts and gts and the angry data-escaping monsters ate my tags. Commented May 8, 2013 at 6:48
  • @JaimieSirovich, you should just indent the code by 4 spaces, and all characters would be escaped automatically. I've fixed it for you for now. Commented May 8, 2013 at 6:50
  • @Dogbert I totally never knew that. Maybe I should use SO more =) I just lurk most of the time 'stealing' free knowledge that saves me hours and hours of time. Commented May 8, 2013 at 6:53
  • why <br> after the <script> statement? xD Commented May 8, 2013 at 7:01

5 Answers 5

Reset to default
14

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

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.

Improve this answer

Comments

3

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

Improve this answer

2 Comments

async=true is not valid syntax. Just use async to enable it in IE10 and above. Source: w3.org/html/wg/drafts/html/master/scripting-1.html
@user1491819 the page moved to here w3c.github.io/html-reference/script.html — the correct syntax is no async attribute, async by itself (HTML), or async="async" (HTML and XML). This is what most Boolean attributes work in HTML. Unfortunate that some people introduce attributes that accept true or false. It makes the whole thing confusing.
1

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');
Improve this answer

1 Comment

According to MDN, the async attribute is boolean, so does script.async = 'async'; work? developer.mozilla.org/en-US/docs/Web/HTML/Element/… Or is it one of those weird ones where the value on matters if it is false and all others are assumed true just because the attribute exists?
0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.