We make the Web easy, understand and accessible for everyone.

Now, if you've ever worked on a larger project, you know that as you start to add new features to the project, the project becomes slower and slower and your pages load slower and slower for the user.

And to fix this, usually look at the back end to try to optimize your database connections and other loading on the back end of things.

But one of the easiest and quickest ways to increase page load speed is to look at how you're loading in your job, a script on the front end.

I'm going to talk about the three different ways that Java script is loaded in this video.

Gonna give you a visual examples to help you understand them as well as talk about their advantages and disadvantages.

So let's get started now before we can get started talking about the different ways we can load our job script.

We first need to understand how our browsers parts are HTML.

When an HTML file was downloaded by the browser, it starts at the very top of the H T.

M o file and parses all the way down the H t mo file until it reaches the very bottom.

As it's doing this, it becomes across resource is it needs to download, such as images.

It will send a request to download that and continue Parson.

Even if the resource is not finished downloading, it will do it in the background.

But when it comes to Java script, a normal script tag will send a request to download and the Parsons stops as soon as it hits that script, Tech and Waits until the script tag is down mood and executed before it'll continue.

Parts in the rest of HTML files, and this is the first way too low Java script, which is the way that most JavaScript is loaded because it's just a single script tag with a source, attributes and no other attributes.

This is why many times when you see these script tags, you see them at the very bottom of the HTML.

So that way, the part sir confined all of the images and other content before gets the Java script, which will delay the part, sir, until after the job script is downloaded and executed so I'll show an example here of a bar that shows you the aged him out being downloaded.

And as soon as it hits that Java script tag, it will stop parsing HTML.

It'll down with the job script, and then it'll run the Java script.

And not until after the jobs create has done running well.

The HTML continue to parse the rest of the document.

This is something that we want to try to avoid with our JavaScript in order to make our page speeds faster.

So we're gonna look at the next way to download Java script, which is using the asynchronous tag, which is called a sink.

The asynchronous tag tells our parcel that it can download this Java script in the background, and it will continue to parse while the Java script is being downloaded.

And then, as soon as the Java script is being done downloaded, whether it's before the partials done or after the parson's done, it will completely stop parsing, execute the Java script and then resume parsing after the job script has done being executed.

And this means that if you have a bunch of asynchronous JavaScript tags in your project, they will be loaded in a random order, depending on how fast the actual file downloads.

So every time you load the page, they could potentially be run in a different order.

This is something that you may not always want.

So then we have 1/3 way to load, which is using the differ tag.

The differ attributes for a script tag is very similar to a sink attributes, except for instead of executing the JavaScript.

As soon as it's done being downloaded, it waits until the Parsa is completely finished, parsing all of the age team out, and then it runs all of this group tags in order that they're listed inside of the HTML document.

So this will work exactly the same as not putting any of these a sink or differ in your script tag so they run in the order that they defined.

But instead of blocking the parsing of the HTML, it'll wait to run until after the HT.

Most parts, in my opinion, differ, is the most useful of the three ways to load the Java script because it allows you to run Java script in order, which is sometimes very important if you're including certain libraries that depend on other libraries, so you need to load them in a very specific order.

Or, if you don't want a parse, block the parson at all.

So you don't want to use a sing, since if it finishes downloading, it will block the parcel while it's executing the drivers, which, depending on the size of the file and the content in it, could be an insect, a non insignificant amount of time that you're wasting running the Java script when you could be doing that after the HT most parsed and it'll run in order, which is very nice toe have now that we understand how the differ and a sink attributes work and how drama script can either block or not block the parsing of our HT Mountain.

Let's take a look at a live example of using these different attributes toe low JavaScript so we can better understand how these different attributes affect the load speed of our pages in order to explain JavaScript loading the best that I can.

I have a few different windows open here to help explain on the right hand side of my screen, I have the Council for my Web page open, which is going to be walking the different times that different events happen and the name that they happen.

So, for example, we have the starting of our HTML parts, the ending of our HTML parts and then the document ready function so that we know when our document is ready and able to be run on by Java skirt on the left.

I have visual studio code with a small HTML page and a very large HTML page to be able to test the load speeds of two different sized pages.

I also have to Java script files that are both small and large that we can use to test with the different voting methods and finally, at the bottom of my screen, I just have the Web page with a button that allows me to go to the large or small version.

So right now we're on the small page, have a click, few other.

We go to the large page and you can see on the right here.

The time for loading has drastically increased for when we're on the small page, so they get started.

Let's go into the small page, take our script tag here and add our small Java script file in here using the normal loading technique without any a sink or defer.

And if you say that you see that we start the html parse, then it gets to this line, this script tag, and it executes what's inside of that JavaScript.

So at 5.4 milliseconds, excuse that job is good and then it finishes Parson afterwards.

And really, there's not much difference between having that job script because it takes about seven milliseconds and removing it to be about two milliseconds.

It really doesn't make much of a difference.

But if we wanted to load a larger drama script file instead, if you say that you know, Alice, see that the execution and finishing of our document takes much longer because we have to wait for this normal Java script to be loaded before we can finish parsing the rest of our HTML document.

In order to get around this, we can use a think tank, for example.

So if we put a sink in here and we'll save this, you see that now our document is parsed and ready before a sinking his code actual gets run, and you can kind of ignore the time on this asynchronous one, because it's just some inconsistencies with my download of my network.

So if you say that we can refresh it, you could see again.

The HTML is parsed before the actual job script is executed, so it's not waiting for that job script execute.

But if we change it to differ here and run that you see again that the HTML parsing is not blocked by the differ.

But the differ code is executed before the ready event of the document is run.

So this could be used in order to make our job a skipped run before the on Doc.

Come on, Don camp.

Tent loaded event is fired from the document.

It's also allows us to execute our code and order as we talked about earlier, which is incredibly useful now would switch over to our large HTML here.

Let's load in our job description.

I was going to use the large job script file here, and if you say that you see that executes before the actual content is being finished, Parson, because we're using normal voting, have we changes to a sink, and we say that you see that I'm a sink is actually being executed before the parson is done this time, as opposed to earlier.

It was being parsed afterwards.

And if we continue to say this a few times, you will see that in this case are a sink is actually executed after our parson of her html So you can see that asynchronous code with the A sink tag will be run at different times, depending on the download speed of your network.

So you cannot guarantee the order of these scripts.

And if you need that order and guaranteed to have to use the differ attributes if we say that you see defer, it always executes as soon as the HTML parson is done and before the document is ready and it always executes in order.

Differ is much easier to understand and much easier to use when you have dependent.

JavaScript and asynchronous is much easier to use when you have small Java script files that really don't depend on anything else, so you don't care if they load before the pages done being parsed or after the pages done being parsed for the most part, I would say Use differ because it's more reliable and you could always know where it's going to be executed.

And you don't have to worry about it being parsed before the actual HTML parson is done, which could slow down the parson if it's a large executing file.

One other thing that I didn't mention is that when you're voting a tag the normal way such a cz this most of the time, people will put this script tag at the very end of the body tag down here in order to eliminate the actual pausing of the parsing.

And if we say that, you'll see that this normal stuff gets executed right before the documents done being parsed, which means that the document is already loaded up all the image tags and stuff that it needs to do.

So you may see this a lot, but if you're going to do this, you might as well just use differ and put in the head tag so that it's easier to find your drive a script files.

So they're all in one place, as opposed to being stuck at the bottom of the body tag.

So thank you guys very much for watching this video.

I hope you learned something about how you can load javascript quicker and make your page boat quicker for your end user using a sink and D for tags instead of just using the normal script Tech to load your job script.

If you guys did enjoy this, make sure to leave me.

And like Anna comment down below.

Let me know what other javascript features you want me to discuss in the future.

Thank you guys very much for watching.

Have a good day.