Async and defer change the way a script is loaded. In this video you will learn everything that goes into rendering a page. We learn the basics of page loading such as HTML parsing and DOM construction. Impact of script tag on the loading of a page. The critical rendering path and how to improve the loading time for a page with the help of async and defer script attributes.
► Blog post related to this video: [ Ссылка ]
► Blog: [ Ссылка ]
► Mentorship - [ Ссылка ]
Find me here👇🏼:
► Instagram: [ Ссылка ]
► Twitter: [ Ссылка ]
► LinkedIn: [ Ссылка ]
⏱Timeline:
00:00 About
00:25 Page rendering - DOM
05:24 CSS Object Model(CSSOM)
06:59 Loading scripts
07:45 The problem -parser blocking scripts
08:00 Example of parser blocking script
09:45 Why is the script tag parser blocking?
11:32 Impact of slow loading css
13:46 Possible solution?
15:38 Async to the rescue
16:36 Visual representation of async script loading
16:52 Defer the second option
18:17 Deferred scripts visualized
18:36 The order matters
20:45 Async vs defer
21:29 The key differences visualized
21:41 Which one to use?
22:37 Outro
Gif Credits:
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
#Async #Defer #HTML #JavaScript #CSS #DOM #TweakedDev
