For example, google+ gives this code:
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
but why not just this:
<script async src="https://apis.google.com/js/plusone.js"></script>
async and its cousin defer aren't supported by all browsers. (IE didn't get them until IE10, for instance.) The first method will always be async, the second won't be on browsers that don't support async.
The reason the first will always be async is that script elements added to the DOM dynamically like that don't hold up the parsing and rendering of the document, whereas <script> tags inline in the HTML content do (barring the use — and support — of async or defer).
There are good explanation: Which browsers support <script async="async" />?
Yes, now most browsers support async but usually you need 100% guaranty that you code works, and then you need to use first form
