This question is sort of a tangent to Which browsers support <script async="async" />?.
I've seen a few scripts lately that do something like this:
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://www.example.com/script.js'; document.getElementsByTagName('head')[0].appendChild(s);
This is a common way to add a script to the DOM dynamically, which, IIRC from Steve Souders's book "Even Faster Web Sites," prompts all modern browsers to load the script asynchronously (i.e., not blocking page rendering or downloading of subsequent assets).
If I'm correct in that, does the s.async = true
statement have any use? Wouldn't it be redundant, even for the browser(s) that support that property, since dynamically appended a script should already trigger asynchronous downloading?
And according to Steve Souders site, "the main benefit of this [async attribute] is it tells the browser that subsequent scripts can be executed immediately – they don't have to wait for ga. js".
The async attribute is a boolean attribute. When present, it specifies that the script will be executed asynchronously as soon as it is available. Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Async and defer are basically two boolean attributes for the <script> tag. Async allows the execution of scripts asynchronously as soon as they're downloaded. Defer allows execution only after the whole document has been parsed. Both attributes don't have any effect on inline scripts.
Async vs Defer. With async , the file gets downloaded asynchronously and then executed as soon as it's downloaded. With defer , the file gets downloaded asynchronously, but executed only when the document parsing is completed. With defer , scripts will execute in the same order as they are called.
The question is does s.async = true
have a use for dynamically inserted scripts, or are these loaded asynchronously already. The answer is they aren't loaded asynchronously in all browsers, as explained here (thanks to Markus Olsson for the link)
script-inserted scripts execute asynchronously in IE and WebKit, but synchronously in Opera and pre-4.0 Firefox. In Firefox 4.0, the async DOM property defaults to true for script-created scripts, so the default behavior matches the behavior of IE and WebKit.
In browsers that support async
but don't already default to asynchronous loading (for example, Firefox 3.6), async = true
makes a difference.
(The above link confirms that async is supported in Gecko 1.9.2, the layout engine used by Firefox 3.6)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With