How to defer External Javascript
What Is The Fastest Way To Load JavaScript
0:00 / 0:00
Quality:
Sharing buttons:
hello everybody kyle here from webdev
simplified we make the web easy to
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 you
look at the backend to try to optimize
your database connections and other
loading on the back ends of things but
one of the easiest and quickest ways to
increase page load speed is to look at
how you are loading in your JavaScript
on the front-end I'm going to talk about
the three different ways that JavaScript
is loaded in this video going to give
you 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 javascript we first need
to understand how our browser's parse
our HTML when an HTML file is downloaded
by the browser it starts at the very top
of the HTML file and parses all the way
down the HTML file until it reaches the
very bottom as it's doing this it
becomes across resources it needs to
download such as images it'll send a
request to download that and continue
parsing even if the resource is not
finished downloading it'll do it in the
background but when it comes to
JavaScript a normal script tag will send
a request to download and the parser
stops as soon as a his s cryptic and
waits until the script tag is downloaded
and executed before it will continue
parsing the rest of the HTML file and
this is the first way to load JavaScript
which is the way that most JavaScript is
loaded because it's just a single script
tag with a source attribute 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 parser can find all the images
and other content before gets the
JavaScript which will delay the parser
until after the JavaScript is downloaded
and executed so I'll show an example
here of a bar that shows you the HTML
being downloaded and as soon as it hits
that JavaScript tag it'll stop parsing
the HTML it'll download the JavaScript
and then it'll run the JavaScript and
not until after the JavaScript is done
well the HTML continued 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 were going to look
at the next way to download JavaScript
which is using the asynchronous tag
which is called a sync the asynchronous
tag tells our parser that it can
download this JavaScript in the
background and it will continue to parse
while the JavaScript is being downloaded
and then as soon as the JavaScript is
being done downloaded whether it's
before the parser is done or after the
parser is done it will completely stop
parsing execute the JavaScript and then
resume parsing after the JavaScript is
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
a third way to load which is using the
defer tag the defer attribute for script
tag is very similar to the async
attribute except for instead of
executing the JavaScript as soon as it's
done being downloaded it waits until the
parser is completely finished parsing
all of the HTML and then it runs all the
script 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 async or deferred in your
script tag so they'll run in the order
that they're defined but instead of
blocking the parsing of the HTML it will
wait to run until after the HTML parsed
in my opinion defer is the most useful
of the three ways to load the JavaScript
because it allows you to run JavaScript
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 to
parse block the parsing at all so you
don't want to use asing since if it
finishes downloading it'll block the
parser while it's executing the
JavaScript 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
JavaScript when you could be doing that
after the HTML is parsed and it'll run
in
which is very nice to have now that we
understand how the defer and async
attribute work and how JavaScript can
either block or not block the parsing of
our HTML let's take a look at a live
example of using these different
attributes to load JavaScript so that 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 console for my
web page open which is going to be
logging the different times that
different events happen and the name
that they happen so for example we have
the starting of our HTML parse the
ending of our HTML parse and then the
document ready function so that we know
when our document is ready and able to
be run on by JavaScript 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 two
JavaScript files that are both small and
large that we can use to test with the
different loading methods and then
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 if we click view other we go
to the large page and you can see on the
right here the time for loading has
drastically increased from when we're on
the small page so to get started let's
go into the small page take our script
tag here and add our small javascript
file in here using the normal loading
technique without any async or defer if
you save 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 five
point four milliseconds it execute that
JavaScript and then it finishes parsing
afterwards and really there's not much
difference between having that
JavaScript 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 JavaScript file instead do
you save that you now see that the
execution and finishing of our document
takes much longer because we have to
wait for this normal JavaScript to be
loaded
before we can finish parsing the rest of
our HTML document in order to get around
this we can use the async tag for
example so if we put a sink in here and
we save this you see that now our
document is parsed and ready before
asynchronous code actually 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 save that we can
refresh it you can see again the hTML is
parsed before the actual JavaScript is
executed so it's not waiting for that
JavaScript to execute but if we change
it to defer here and run that you see
again that the HTML parsing is not
walked by the defer but the defer code
is executed before the ready event of
the document is run so this can be used
in order to make our JavaScript run
before the on docum on don competent
loaded event is fired from the document
it's also allows us to execute our code
in order as we talked about earlier
which is incredibly useful now let's
switch over to our large HTML here let's
load in our JavaScript we're just going
to use the large javascript file here
and if you say that you see that it
executes before the actual content is
being finished parsing because we're
using normal loading if we change this
to async and we say that you see that
our async is actually being executed
before the parsing is done this time as
opposed to earlier it was being parsed
afterwards and if we continue to save
this a few times you will see that in
this case our async is actually executed
after our parsing of our HTML so you can
see that asynchronous code with the
async 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 you'll have to
use the defer attribute if we say that
you see defer it always execute as soon
as the HTML parsing is done and before
the document is ready and have always
execute in order defer is much easier to
understand and much easier to use when
you have dependent JavaScript and
asynchronous is much easier to you
when you have small JavaScript files
that really don't depend on anything
else so you don't care if they load
before the page is done being parsed or
after the page is done being parsed for
the most part I would say use defer
because it's more reliable and you can
always know where it's going to be
executed and you don't have to worry
about it being parsed before the actual
HTML parsing is done which could slow
down the parsing if it's a large
executing file one other thing that I
didn't mention is that when you're
loading a tag the normal way such as
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 save 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 defer and put in the
head tag so that it's easier to find
your JavaScript 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
load quicker for your end user using the
async and defer tags instead of just
using the normal script tag to load your
JavaScript if you guys did enjoy this
make sure to leave me a like and a
comment down below letting 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
