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.