cachaito
2/19/2014 - 12:45 PM

Async & Defer attributes

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Both have no effect on inline scripts (i.e., scripts that don't have the src attribute). More reading: http://www.kirupa.com/html5/running_your_code_at_the_right_time.htm

async defer attributes.html
content_copyfile_download
<!--
async script
Executes at the first opportunity after it is finished downloading and before the window’s load event.
Downloads the script as the HTML is parsed and executes the moment it has been downloaded.
Nie są wykonywane w kolejności występowania na stronie. 
You could use async for scripts that does not depend on other scripts to run. 
-->

<!--
- defer scripts
Downloads the script as the HTML is parsed but waits to execute once the page has been rendered.
That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.
(technically, until the entire DOM is parsed.)
-->

<!-- jeszcze inne podejście, holy grail? http://www.html5rocks.com/en/tutorials/speed/script-loading/ -->
<script>
[
  '//other-domain.com/1.js',
  '2.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});
</script>