async script attribute vs async property?

Question

The async attribute , is a more recent feature of HTML5,
which indicates that the downloaded file won’t call document.write and can be downloaded as the page is being processed

But I've heard that there’s another way to load scripts asynchronously that’s backward compatible with older browsers.

It turns out that I can re-create the behavior achieved by the async attribute by dynamically creating a script DOM element in JavaScript and appending it to the page.

Example :

var script = document.createElement('script');
script.src = 'http://camerastork.com/widget.js?product=1234';
script.async = true
...

So if it's for old browsers , which don't support async-- how can it be - that I can still use .async property ?

In your example, don't forget to actually add script to something (e.g., document.getElementsByTagName('script')[0].parentNode.appendChild(script); — T.J. Crowder
– T.J. Crowder, Commented Nov 11, 2013 at 8:11

T.J. Crowder · Accepted Answer · 2013-11-11 08:09:22Z

3

The async attribute/property is older than you think it is (at least in some browser lineages). But the real reason this works is that the majority of browsers have always treated all script elements added to the DOM via createElement / appendChild as "asynchronous" (without requiring script.async = true). There were only a couple of browsers, years ago, that treated them synchronously (didn't execute the next line of code until the script had been fetched and executed), and the browsers in question have since updated their behavior.

answered Nov 11, 2013 at 8:09

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

17 Comments

Royi Namir Over a year ago

well I read it here (which states that it is a more recent deature of html5....). but It's weird that MDN doesnt states its an html 5 feature

T.J. Crowder Over a year ago

@RoyiNamir: A lot of HTML5 is codifying, documenting, and standardizing what at least some browsers have been doing for years. This is an example of that.

Royi Namir Over a year ago

So if I create dynamic script , should I or should I not add async property ? and what if I want to add async attribute ? Im confused,

T.J. Crowder Over a year ago

@RoyiNamir: If you create a script via createElement and add it to the DOM, with modern browsers, it doesn't matter whether you set script.async = true or not, it will be executed asynchronously. With some older browsers (Firefox 3.x, for instance), scripts added to the DOM that way were executed in order, but that was never common behavior, and those browsers stopped doing it. Setting script.async = true; is harmless, but unnecessary with modern browsers. Re the async attribute, the async property is a reflected attribute (like id is for the id attribute).

Royi Namir Over a year ago

Q : You said : With some older browsers (Firefox 3.x, for instance), scripts added to the DOM that way were executed in order.... But how can it be ? If I create a script element ( when im at the end of </body>) and attach it to the head , the head was already parsed. so what order are we talking about ?

|

Collectives™ on Stack Overflow

async script attribute vs async property?

1 Answer 1

17 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related