Scripts (without any async or deferred attributes) are fetched and executed immediately before the browser finishes parsing the page. It basically waits for the file to be downloaded and executed before progressing.
Async and deffered are boolean html5 attributes which get around the above bottleneck. With async and deferred scripts start downloading immediately and the browser continues its parsing.
Async
Async starts downloading, and then executes whenever it has finished downloading. Even if it downloads before the html document has finished parsing it will be executed. During that execution time the document parsing waits for the script to finish.
<script async ...
Deferred
Deferred is similar to async in that it downloads the script concurrently with document parsing, but the difference is it executes scripts in order that they appeared and after the document has been parsed. This does not mean they execute after the DOMContentLoaded event has been triggered though.
<script deferred ...
References
- Mozilla script element
- Webkit.org
- Growing with the web did a great article on async vs defer