Javascript Async = true Attribute

Question

I see this code example in some unnamed provider documentation. It seems to load a script asynchronously and then call a function from it. I understand that checking if- undefined will prevent an explicit error, but is this not entirely wrong?

I believe that in IE8 / 9 it will work properly, but will be executed until the LOADER_URL script is loaded and executed; and I believe in many other browsers that support asynchronous attrbute, this will simply cause the inline block to execute code inside the if block only part of the time. The documentation states that tags are asynchronous and do not slow down 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 her documentation, she had no proposal for an asynchronous attribute and this statement was not made. Did any technical writer make a mistake and say, “Yes, that will work,” without proper testing in all browsers? In IE <= 9, it will work all the time. And since the asynchronous uber-fun code is for debugging ... maybe this worked for them ...

What is my suspicion :)

Answer 1

You were right to be suspicious. Published code is almost guaranteed to not work as intended in browsers that support the async attribute.

Basically there are 3 "modes":

• If an asynchronous attribute is present, then the script will be executed asynchronously as soon as it is available.
• If the async attribute is missing but the defer attribute is present, then the script is executed when the page has finished parsing.
• If none of the attributes is present, then the script is retrieved 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 value of the async attribute is ignored, the mere presence of the attribute indicates that the script should be executed asynchronously. Therefore, setting the value to false will still match the setting to true.

Answer 2

"Async = true" when supported by the browser basically means: the browser will load the script asynchronously and will execute it when it prefers.
Thus, there is no guarantee that the second script will be executed after the first.

You can safely use "asynch js load" only if there is no other code on the page that directly uses the objects that you load in the asynch script.

I have evidence of all this because I made a similar mistake in one of my projects, but it will not be easy to replicate through a violinist or something like that.

Thus, the code suggested in the question will work someday yes, and someday no.

Answer 3

if async is true

the script will be loaded and executed as soon as possible, and the HTML page will be syntaxed at the same time

in case of async - false

The process of loading and executing the script will be performed before starting any parsing of the HTML page, so HTML phasing will be stopped, and the script will be loaded and executed first.

Answer 4

As described here , this is new in HTML5: the async attribute assigned to 'async', because its value indicates that the script is executed asynchronously (only for external scripts).

I have not yet found a problem on my site with this code in any browsers to call an 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 5

Does this make sense largely depends on the structure of the code.

You should keep in mind that the browser caches certain files (and this includes scripts). Your scripts seem to be some kind of library that loads the required resources on demand (maybe something similar to require.js ), so this asynchronous code may make perfect sense if the browser has everything in the cache (= the object already exists ) to simply interrupt the boot process.