Default Behavior:
- html is getting parsed
EVENT: it gets across script element
- html parsing stops
- js file is getting downloaded
- js file is parsed and executed
- html continues getting parsed
DEFER
- html is getting parsed
EVENT: it gets across script element
- html continues parsing AND SIMALTANEOUSLY js files gets downloaded
EVENT: html parsing finished
- 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
- html is getting parsed
EVENT: it gets across script element
- html continues parsing AND SIMALTANEOUSLY js files gets downloaded
EVENT: js file finished downloading
- html stops getting parsed and js file begins getting parsed
EVENT: js file finished parsing
- 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.
Top comments (0)