Defer vs Async vs Default Browser Behavior

Default Behavior:

1. html is getting parsed

EVENT: it gets across script element

1. html parsing stops
2. js file is getting downloaded
3. js file is parsed and executed
4. html continues getting parsed

DEFER

1. html is getting parsed

EVENT: it gets across script element

1. html continues parsing AND SIMALTANEOUSLY js files gets downloaded

EVENT: html parsing finished

1. js file gets parsed and executed

DEFER means 'postpone' or 'do sth at a later time' so the parsing of js and execution is 'deferred' BUT loading is not

Not always is js file execution is waiting for html to be finished getting parsed, sometimes, js file execution is waiting for js file to load because it takes longer than html parsing.

ASYNC

1. html is getting parsed

EVENT: it gets across script element

1. html continues parsing AND SIMALTANEOUSLY js files gets downloaded

EVENT: js file finished downloading

1. html stops getting parsed and js file begins getting parsed

EVENT: js file finished parsing

1. html continues parsing

Once browser reaches script element it starts to process js (loaded and executed) regardless of html status, html is parsed side by side when js is being loaded but js starts getting parsed and executed the moment it finishes loading, html parsing stops since browser can parse one thing at a time.

I hope this was clear. If you have any questions, please feel free to ask them below. Additionally, I welcome any corrections or valuable information you may have to contribute.