Issues it causes:
- DOM elements below the script tag can’t be handled because script cannot see them and can’t add handlers.
- If there is a bulky script on the start of the page then it block the rendering of the html page and user cannot see the page content till the script gets downloaded and run.
<script defer src="/js/jquery.min.js">
<script async src="/js/extras.min.js">
Which is the most useful?
When to use what?
Mostly using defer guarantees the execution of the script is always after the html is parsed and rendered on the screen.
Whereas, with async attribute there is no guarantee that execution of the script will be after the html is parsed it can be before also.