Original subtitles

To finish this section,

let's take a quick look at different ways

of loading a JavaScript script in HTML.

So up to this point, we have always used the regular way

of including JavaScript files into our HTML,

like we can see here.

However, we can also add the async attribute

to the script tag like this, or the defer attribute.

And these attributes are gonna influence the way

in which the JavaScript file is fetched,

which basically means download and then executed.

Now in the HTML, we can write the script tag

in the document head, or usually at the end of the body.

So these are the two situations

that we're gonna be comparing in this slide.

So when we include a script without any attribute

in the head,

what will the page loading process look like over time?

Well, as the user loads the page

and receives the HTML, the HTML code will start

to be parsed by the browser and parsing the HTML

is basically building the DOM tree from the HTML elements.

Then at a certain point,

it will find or a script tag, start to fetch the script,

and then execute it.

Now, during all this time,

the HTML parsing will actually stop.

So it will be waiting for the script

to get fetched and executed.

Only after that, the rest of the HTML can be parsed.

And at the end of that parsing,

the DOM content loaded event will finally get fired,

as we learned in the last video.

Now, this is not ideal at all, right?

We don't want the browser

to be just sitting there doing nothing,

because this can have a huge impact

on the pages performance.

Plus, in this case, the script will actually be executed

before the DOM is ready.

And so again, that's not ideal.

So never do this,

never include the script in the head like this.

That's why we usually always put the script tag at the end

of the body, so that all the HTML is already parsed,

when it finally reaches the script tag.

So in this situation,

this is how the page loading process looks like.

The HTML is parsed,

then the script tag is found at the end of the document,

then the script is fetched.

And then finally, the script gets executed.

And this is much better.

So if you didn't know why we always put the script

at the end of the body.

Well, now you know, however, this is still not perfect,

because the script could have been downloaded before,

while the HTML was still being parsed.

So what about the async attribute?

Well, this is what the loading process looks like

when we use async script loading in the head

of the document.

So as you can see, the difference is that the script

is loaded at the same time as the HTML is parsed.

So in an asynchronous way,

so that's already an advantage.

However, the HTML parsing still stops

for the script execution.

So the script is actually downloaded asynchronously.

But then it's executed right away in a synchronous way.

And so the HTML code has to wait for being parsed.

But anyway, as we can see from the length

of the diagrams, this still makes page loading time shorter.

But now, what about the defer attribute?

Well, when deferring what happens is that the script

is still loaded asynchronously.

But the execution of the script

is deferred until the end of the HTML parsing.

So in practice, loading time is similar

to the async attribute, but with the key difference

that would defer the HTML parsing is never interrupted,

because the script is only executed at the end.

And many times, this is exactly what we want.

Now, you might be wondering why I didn't show async

and defer in the body yet.

And the reason for that is

that they simply don't make sense there.

Because in the body, fetching and executing the script

always happens after parsing the HTML anyway.

And so async and defer have no practical effector.

All right and so the async

and defer attributes have no practical effect here at all.

They will make no difference all right.

Now there are, of course use cases for all these strategies.

So let's now compare them, except, of course,

the regular loading in the head,

which is completely ruled out.

So here is what we already know

about the three strategies,

and also the three loading diagrams that we analyzed

in the last slide.

But let's now compare the async

and defer attributes a little bit better.

So one important thing about loading an async script is

that the DOM content loaded event

will not wait for the script

to be downloaded and executed.

So usually, DOM content loaded,

waits for all scripts to execute.

But scripts loaded with async are an exception.

So with async, DOM content loaded is fired off as soon

as the HTML finishes parsing.

And this might actually happen

when a big script takes a long time to load,

like in this example.

So notice how the DOM content loaded event appears right

after HTML parsing in both these diagrams.

Now, using defer, on the other hand, forces,

the DOM content loaded event to only get fired

after the whole script has been downloaded and executed.

And so this is the more traditional way

that this event works.

Another very important aspect is that async scripts

are not guaranteed to be executed in the exact order

that they are declared in the code.

So the script that arrives first gets executed first.

On the other hand, by using defer,

that is not the case.

So using the defer attribute guarantees that the scripts

are actually executed in the order that they are declared

or written in the code.

And that is usually what we want to happen.

So in conclusion, and also keeping in mind,

what we learned in the last slide,

using defer in the HTML head is overall the best solution.

So you should use it for your own scripts.

And for scripts where the order of execution is important.

For example, if your script relies

on some third party library that you need to include,

you will include that library before your own script,

so that your script can then use the library's code.

And in this case, you have to use defer and not async.

Because defer will guarantee the correct order of execution.

Now, for third party scripts,

where the order does not matter, for example,

an analytics software like Google Analytics,

or an ad script, or something like that,

then in this case, you should totally use async.

So for any code that your own code will not need

to interact with async is just fine.

So it's a good use case for this kind of scripts.

And I'm saying this because, of course,

you can use different loading strategies

for different scripts in your web application or website.

Okay, now, what's important to note

is that only modern browsers support async and defer.

And they will basically get ignored in older browsers.

So if you need to support all browsers,

then you need to put your script tag at the end

of the body and not in the head.

That's because this is actually not a JavaScript feature,

but an HTML5 feature.

And so you can't really work around this limitation,

like you can do with modern JavaScript features

by transpiling, or poly-filling.

Okay, now, this should give you a pretty good idea

about different ways of loading JavaScript scripts.

So let's now quickly move over to the code

and implement this.

And here, we still have the script at the end of our body,

and of course, without any async or defer attributes.

Now before we move this to the head,

let's quickly check out here our Network tab

one more time.

And let's use the fast 3G preset now.

Just so we can see these files here being loaded.

And also to see this DOM content loaded event being fired.

And so here we can actually see the different assets

of the page being loaded over time.

And let's search for the script.

And so yeah,

here you see that the script actually only loaded

so only started to load after these first images here.

And also the HTML itself, which is this one here.

So only after they finished loading is

when the JavaScript file started loading.

That's why here, we have this stalled time.

And so this is a bit similar to the diagram

that I showed you in the slide.

Okay, now, this time is probably different for you.

But just take note of it, so we can compare it

to the next scenario.

So let's now copy this.

And I will command it out using command slash.

And so now I'm moving it here to the head.

Okay, and then I'm gonna put the defer attribute.

Because as we just learned, this is the preferred way

of loading our own scripts.

And also when the order matters.

So from now on, we will always load our scripts like this.

So in the head with the defer attribute.

So let's give it a save.

And this will then trigger a reload here.

And you see that now the DOM content loaded event here,

fired half a second earlier.

And so that's because the JavaScript file

could start to load immediately.

And so indeed, now here, as we hover this file,

we don't have that stalled period.

So that period in the beginning,

where the file isn't even being loaded, right,

so this looks different.

And, in fact, it looks exactly as I showed you in the slide

one more time.

So the load time is of course different,

because the assets that we need to download

are exactly the same.

But what matters is that the page

is basically ready earlier in this scenario.

All right.

So let's put it back.

And, yeah, with this,

we actually finished one more section.

And one more really beautiful project,

in my opinion, at least.

So one more time, you can add this to your portfolio,

or show off to your friends,

or maybe even potential employees, or employers,

just make sure about this notice that I have here

at the bottom of this page,

and in all the other big projects,

which is please don't use this project

on your own to create your own course.

Also, don't claim it as your own product, as if,

like you came up with this design on your own.

So this is just for learning purposes,

or for your portfolio.

All right, but I think that's pretty obvious anyway.

I just wanted to make sure to mention it here,

because many people ask me questions

about what they can do with the projects

and what they can't.

But anyway, congratulations for finishing one more section.

And actually, by reaching the end of the intermediate part

of this course.

That's a huge milestone,

and you should really be celebrating.

So great job of going through

all these videos together with me,

learning all of these important and valuable skills.

So take a well deserved break now.

And after you're energized, let's move on together to one

of the most important sections of this course,

which is gonna be about object oriented programming

in JavaScript.