What Is The Fastest Way To Load JavaScript

[@kurtobando]

No long intro, short presentation, straight examples, clear explaination. Thank you Kyle.

[@jackofnotrades15]

Simple, elegant, crisp. Thats how you teach. Thats how it needs to be done ideally.

[@busyrand]

This is becoming one of my favorite KZbin channels period... This is perfect for beginner to intermediate developers.

[@MartiQwx]

The breaks he makes between each sentences make it so much easier for non-native speaker to understand.

[@nekoill]

I don't know how, but you manage to explain things like I'm five without being patronising. That's remarkable.

[@Vikas_Singh_Kushwaha]

These small videos are really good. Because you can find full blown project tutorials on KZbin but these conceptual things are not available that often

[@MrBoiks]

This video helped me make sure my loading animations rendered crisply on page load. Before, even with gsap, everything appeared choppy and glitchy. One simple keyword and it animated as planned. Your my hero! I was going to scrap the entire loading animation

[@darrenhale4028]

Exam is in 6 hours and you are an absolute life saver! Subbed!

[@WebDevSimplified]

I'm glad I could help. Good luck on the test.

[@NYC_CuriousG]

Wow you're a good teacher. I get it now. Subscribed!

[@WebDevSimplified]

Thanks!

[@davidpuckree5254]

@@WebDevSimplified lol

[@tubi8992]

Thanks!

[@WebDevSimplified]

Thank you for the support!

[@tubi8992]

@@WebDevSimplified you deserve it Kyle, your videos are well researched, straight to the point and very useful. Wanted to say that in the comment but was watching it in bed before I fell asleep 🙃 keep up the great work!

[@12thevil]

Yo, you are really helping me get through school. I can't thank you enough.

[@achtube85]

3:41 This image is gold. So clear!

[@gokujr4133]

Bro what happened if we you javascript at the end of the code ? Instead of using defer and async.

[@codedynamics1]

i swear you meant "significant" this is one of the best explainations i have found, very nice!

[@terry9873]

You don't know this yet but your my new mentor. Arigato senpai!

[@Zabsounds]

Everything is crystal clear and well explained!! Thank you ! Please don`t stop making this videos!

[@av03]

I never know about this until i watch this, as always your content is very helpful. Thanks Kyle

[@avimehenwal]

Amazing video ... So clear and crisp and with a DEMO ! Could not have asked for better XD Great job, keep it up. Big FAT link from my side

[@thomasm1964]

Kyle - you have an absolute gift for making clear, concise, straightforward explanations. Shall be binge-watching. Oh yes: and you have a clear, neutral voice as well. Cannot tell you how many times I have bailed due to affected, whiny voices!

[@benjaminmoseslieb9856]

Great teaching chops! It really comes through that you want to and have invested in becoming a great teacher. A much rarer skill than programming ;)

[@crespinnougbodohoue7324]

I have just discovered your channel and I am really impressed abt your simple, elegant and succint way to teach. Thanks a lot and Do not stop!!!!!

[@ill-fatedstranger447]

That's what i'm searching for and learn a lot of things.

[@WebDevSimplified]

Im glad the video could help.

[@shinichi9do]

perfect video, 0 dislike. good content.

[@brucoffee1437]

If mdn docs ever wants to make video content I am suggesting this guy

[@AlexTechie]

Thanks, I've been meaning to look into this.

[@WebDevSimplified]

You are welcome!

[@longmarcin]

Just one little detail. Async and defer are not tags! They're attributes of a script tag. Great video anyway. Keep up the good work :-)

[@jaydenmoon1165]

Always love your content - clean and concise as always

[@kuoyulu6714]

Thanks for this short clear tips, really help beginner like me to learn more!

[@bsewall]

Amazingly clear and concise. Thanks for the great video!

[@brandonchen3180]

This guy is a god of web dev

[@VanReactions]

The best video explanation for async and defer, this is very useful for seo, it will be great if you have a video speed optimization for SEO

[@Tomakemehealthy2]

Why defer is not the standard for html loading?

[@soniablanche5672]

you don't need to use defer anymore anyway. Use module js, they defer by default.

[@yadneshkhode3091]

@@soniablanche5672 can you please elaborate I didn't understand what you meant by module js

[@soniablanche5672]

@@yadneshkhode3091 modules let you use "import {something} from "./some/javascript/file.js" in javascript, it's very useful because now dependencies can be declared inside javascript files instead of html files, they are also self contained code and don't pollute the global environment so you don't need to use an IIFE to isolate your code. In the html code you import a module like this : . They defer by default so you don't need to add "defer" to the script tag

[@chemedev]

@@soniablanche5672 Wou never heard of it in this time! But I'm web developing for 7 months now so it's no surprise haha. I'll be learning about that, thanks for that piece of knowledge!

[@bboydarknesz]

@@chemedev here from Web Dev explain JS Modules kzbin.info/www/bejne/mYOrgoGEmL6ZbNU

[@ramiahviknesh3014]

Simple and was visually easy to grasp the concept !

[@vibonacci]

Good video. But one topic was not discussed: you can use both async and defer on the same tag, like Google Maps is loaded.

[@Novia5555]

Can I get some videos or references according to that? I'm a bit curious and after trying to look for it, I didn't find something like you said.

[@minou00701]

your content is so clearly ordered and straight to the point .. so the viewer knows the roadmap and then everything is concretized with different examples that are small easy to follow and to the point as well .. one of the best teachers bro .. hats off and big thanx .

[@heitormbonfim]

Bruh, I love your channel, thanks

[@rizean2]

Backend dev who has to do some front-end from time to time. I wrote a function called setPolling to make sure some elements existed before running. Embarrassing to say I didn't know about putting the scripts at the bottom of the page. I need to go add the defer tag and remove the setPolling code on production pages serving 10s of thousand users per day. I use to make fun of front-end devs but after doing it a while I can say in many ways it harder that what most backend devs have to deal with.

[@pastorfred2543]

Thanks sir, I've learnt something new today..

[@WebDevSimplified]

I'm glad I could help!

[@gopinathkrm58]

Very nice video please upload 3 or 4 videos per week if possible...my next suggested topic is JavaScript Constructor in depth.

[@WebDevSimplified]

I'm glad you enjoyed the video. I would produce more videos each week, but it is tough enough for me to manage a full time job and two videos a week. I am always trying to improve my workflow, though, to create videos faster and hopefully more often. As for your suggestion on the JavaScript constructor, what exactly would you like me to cover about it?

[@gopinathkrm58]

@@WebDevSimplified like difference between other methods and constructor function to create an object and some advanced concepts

[@WebDevSimplified]

@@gopinathkrm58 That sounds like a good idea. I added it to my list of video ideas. Thanks!

[@Antipyj]

All your videos are so clear ty

[@meaningmean]

Thanks, Sir, I've learned something new today.

[@AnilKumar-ro6dz]

I like your simple way of explanation, keep doing more videos.... 👍

[@PraveenClasses]

amazing explanation...and greate visualisation... very greate work. thank you... 100 likes from my side

[@arcanelore168]

Thank you very much for your video. I didn't know this!

[@andrew.schaeffer4032]

wonderful video thanks - concise and great visuals

[@johnconnor9787]

The video about Tree Shaking would be awesome

[@anneu8314]

Thanks again.. I'm learning a lot from your videos.

[@martinhotmann7868]

I am missing some notices about inlineJS. As inlineJS often makes sense if you have less then 1kb. But defer does not work on script-tags in general but just on them if they have a "src" attribute. So if you want to defer inlineJS you can execute it on the event of "DOMcontentLoaded" or put it before the end of the closing body-tag. Its a pitty "defer" does not work on inlineJS. Thank you for your tutorial!

[@madhubalajayakumaran9340]

Best examples... best comparison 👍👍

[@WebDevSimplified]

Thank you

[@송예은-h7b]

This was a very helpful video! Thanks

[@usmanabid7950]

Well Explained, Thanks Bud 👍👍

[@davidfelipecastanocadavid5430]

Great Explanation, thanks for the help !!

[@Ad1tyapardeshi]

Want more videos like this & Thanks 🙏

[@Champagnerushi]

Really good explanation man!

[@muvvaanudeepreddy1562]

thank u for ur crystal clear Explanation.

[@bhargavaram4377]

your explanation is really excellent

[@mosomara]

HI ... thanks for this great video ... i am wondering what is in the "i.js" script ... how do you time the Start and End of HTML parse?

[@RodrigoMendoza7]

Is it correct to assume that by putting our js file in the head and using defer, we can then omit the event "DOMContentLoaded" or document.ready from jQuery (as we've been doing so far)?

[@WebDevSimplified]

That is correct. Defer waits until the entire page is loaded to run so the document should already be ready.

[@RodrigoMendoza7]

@@WebDevSimplified Thanks for clarifying that out 😃👌

[@venkyman4985]

I kno this irrelavant, but there is there a double quote missing at 1:30 in the script tag?

[@nathanheath1328]

This is amazing, thank you for this tutorial !

[@gamersgame43]

9:15 good tip for loading JS files!

[@baabansu9243]

You are always special sir. You are unique

[@corethenics]

Good explanation but need to provide the sample code to the viewers so that they can play with it for better understanding. You can upload the same on gitHub and add the link in description.

[@WebDevSimplified]

Sorry. This is one of my older videos. In my newer videos I have links to both a github and codepen for all applicable videos. I don't generally add code for a video like this though since it is mostly about explanation and the actual code does not have an endpoint or use.

[@ritu_raj_s]

Best explanation 👌👌👌

[@koushi_ku]

thank's man... nice visualization got from the video

[@aravind.a]

Wow amazing explanation...❤️🔥

[@RobertWildling]

Which script did you use to show the various loading times and steps in the console? Can it be downloaded anywhere? Thank you so much for your great informative no-BS videos!

[@WebDevSimplified]

I do not have the script available for download. If I remember correctly I just used a very large script tag to simulate the loading and added a little bit of JS to print to the console when loaded.

[@BrianKiddDevDesign]

@RobertWildling You can use console.time() and console.timeEnd() to figure out when certain parts of the program load. For instance, in my JavaScript file, I placed console.time("JavaScript Loaded") at the beginning of the JS file and console.timeEnd("JavaScript Loaded"); at the end of my JS file. The result will show in the console as something like: JavaScript Loaded: 0.130859375 ms You can do the same for your HTML file by placing both console.time("html start); console.timeEnd("html start"); at the START of your HTML file and console.time("html end"); console.timeEnd("html end"); at the END of your HTML file. The total end result if you used defer could be: html start: 0.003173828125 ms html end: 0.001953125 ms JavaScript Loaded: 0.130859375 ms When I did not use async or defer AND the link to my js file was before the HTML (not at the end of the body section), the result was: html start: 0.0029296875 ms JavaScript Loaded: 0.05078125 ms html end: 0.001953125 ms I am unsure if this is how the presenter did it but it seems to work. I think the presenter had a separate JS file in which he targeted different parts of the DOM like the html and script tags and then just ran a console.time() and console.timeEnd() to determine the different load times of those targets. I hope this helps.

[@maldonadodani]

thanks man, great explanation

[@aryantirkey1744]

Always something new to learn thank u

[@Sd-ge2rk]

That's really useful! Many thanks for the video. Could you share more about the javascript that you have on the right showing when the html starts and ends etc.?

[@AleksandarIvanov69]

Damn, thankfully you mellowed out the crazy eyes in 2020 :D

[@fallonmerri9586]

Thank you for the graph!!

[@tilakmadichettitheappdeveloper]

this explains a lot mate !

[@bboydarknesz]

thanks, amazing, simple and very understanding

[@devanshnigam5172]

Brilliant video and amazing content. Just one doubt, how to clock and record the time of execution of a statement in the document (HTML) or script (JS).

[@md.imanali9998]

Absolutely amazing. Thank you

[@shinej11]

Beautiful explanation. Thank you :)

[@mackynyxz]

Nice explanation!

[@P4P1_]

Thank you very much. Today I learned something

[@onee]

It's funny how on StackOverflow they were hating on defer and praising async.

[@elpislivenetwork]

Very helpful, thank you so much. God bless!

[@josephmarlon2684]

clear explanation of terms

[@MontyKsycki]

Thank You!!! Did not know that. Thanks for sharing!! :)

[@denonbasf3117]

Amigo you're best.

[@beverlyHillsAgent]

So with "async" can be executed at anytime after the script is downloaded. There is no guarantee when it will be executed. It can be before the HTML is done parsing or after the HTML is done parsing. However, with "defer" is always executed after the HTML is done parsing. Correct me if I am wrong.

[@vincentiusherie]

This is brilliant! I've been wanting to know how HTML and JS are parsed.

[@noahkim6463]

So helpful. Thank you :)

[@ernestomotta5178]

Thank you, you made it very clear

[@Tony.Nguyen137]

So if the deferred Js is executed after the html is parsed, does it mean that it comes before the rendering process???

[@yahayaoyinkansola8258]

Yes, before the DOM is rendered, the script is executed, but the only difference here is that the HTML structure is already in place, so after the script executes, it doesn't take time for the content of the DOM to show in the browser

[@andriiauziak1178]

That's a useful information I didn't know

[@sohammondal578]

That animation was so good.

[@WebDevSimplified]

Thanks!

[@miw879]

I wish I got to know your channel 3 years ago

[@rennygalindez]

Excelente vídeo, gracias!

[@Arthur-cx1cg]

very good explanation! thanx!

[@0the0ambient0]

Nice explanation. Thank you.

[@JOc17KER]

3 hero in programing: 1. The Newboston 2. Traversy Media 3. Web Dev Simplified

[@pauloffborba]

Excellent explanation

[@عبدالله0-ج3ط]

thanks for the explanation on this subject

[@BruceElgort]

Great video! Thank you.

[@henrychoi3327]

3:30 an informative chart

[@naveenkr5992]

So defer works like if I put js at the bottom of body am I right?