Html5 async attribute vs js async property

Question

what is the difference between Html5 async attribute vs js async property.

<script src="http://www.google-analytics.com/ga.js" async>

and

(function() {
    var ga = document.createElement('script'); 
    ga.type = 'text/javascript'; 
    ga.async = true;
    ga.src = 'http://www.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(ga, s);
})();

are they interchangeable

I believe that within the head tag the effect is the same. Personally I prefer ` — Protomen, Jan 23 '14 at 16:13

score 3 · Answer 1 · edited May 23 '17 at 12:30

3

No, they are not interchangeable.

Script tag with async attribute executes at the first opportunity after it is downloaded and before window.onload event. So you dont know when that script executes. On the other hand, script loaded within a javascript file can execute whenever you want (after or before window.onload event).

Some links: http://davidwalsh.name/html5-async, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script.

Edit: ga.async = true; as said in Salman A. answer (https://stackoverflow.com/a/14666847/2044286) is omitted by the parser.

edited May 23 '17 at 12:30

Community

1
1

answered Jan 22 '14 at 10:26

Are

2,160
1
21
31

So what happens if you set `s.async = false`? – Salman A Jan 22 '14 at 10:37
Nothing. It has no effect (for small files, at least). – Are Jan 22 '14 at 10:47

Sonata · Answer 2 · 2014-01-22T10:28:53.207

0

The JavaScript is creating the HTML element you are talking about. In JavaScript, the property itself has no meaning, in this case its just a property with the value true.

When the browser reads the HTML, the value gets a meaning.

edited Jan 22 '14 at 10:28

answered Jan 22 '14 at 10:23

Sonata

2,177
25
32

Html5 async attribute vs js async property

2 Answers2