Faster page loading with async and defer!
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: https://gauravsen.codes/faster-page-r...
► Blog: https://gauravsen.codes/blog
► Mentorship - https://gauravsen.codes
Find me here👇🏼:
► Instagram: / gaurav.sen_
► Twitter: / gaurav_sen_
► LinkedIn: / gauravs3n
⏱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:
https://giphy.com/gifs/paul-walker-vi...
https://giphy.com/gifs/fallontonight-...
https://giphy.com/gifs/WitchandWomb-n...
https://giphy.com/stickers/weird-why-...
#Async #Defer #HTML #JavaScript #CSS #DOM #TweakedDev
Auf dieser Seite können Sie das Online-Video Faster page loading with async and defer! mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Tweaked Dev 23 April 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 779 Mal angesehen und es wurde von 26 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
