What Is The Fastest Way To Load JavaScript

As a project grows the load time of pages will slowly increase. Many people look to the back-end for solutions to this problem, when in reality the way JavaScript is loaded can make a large different in page load speed. In this video I will look at the three ways to load JavaScript, normal script tags, async script tags, and defer script tags. I will cover how each method interacts with page speed, and the pros and cons of each. By the end of this video you will have a strong understanding of the various ways to load JavaScript and will be better equipped to make faster and more responsive pages.

Async Vs Defer Article:

Twitter:

GitHub:

CodePen:

#AsyncVsDefer #JavaScript #WebDevelopment

[kurtobando]

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

[jackofnotrades]

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

[NYC_CuriousG]

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

[foxjonesofficial]

Now I know why you always say “<script *defer* src=“script.js”></script>”

[Tomakemehealthy]

Why defer is not the standard for html loading?

[rizean]

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.

[RodrigoMendoza]

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)?

[ill-fatedstranger]

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

[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?

[Vikas_Singh_Kushwaha]

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

[beverlyHillsAgent]

So <script></script> 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, <script> with "defer" is always executed after the HTML is done parsing. Correct me if I am wrong.

[naveenkr]

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

[nekoill]

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

[Zabsounds]

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

[darrenhale]

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

[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

[onee]

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

[el]

so it's better to put my script tag at the top of the page with defer?

[benjaminmoseslieb]

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 ;)

[AlexTechie]

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