How to defer Js Loading
In 3 minutes, JavaScript loading of scripts (async, defer)
0:00 / 0:00
Quality:
Sharing buttons:
would like to talk about JavaScript
loading and how you can use it to your
advantage to improve the loading of your
page and processing so let's get started
so basically I've done a simple set up
here I have an index dot HTML and I'm
loading here four scripts and at the
very end I'm displaying end of the page
and here I have a log where the scripts
can log some of the information and let
me show you what the scripts look like
they're basically all the same they have
a function if he will basically compute
something so it takes a while and it
takes that note AG log and enters
information and here is the difference
it basically says F 1 and it puts in the
time and that's pretty much it app 2 is
similar the only difference is you have
to have two so let's get started
if I just have that and re show you what
happens so let's just try to lower it
it's taking some time as you can see the
scripts are loading one by one app 1
gets loaded first and the reason I made
it a little bit more compute intensity
so you can see the time difference 103
104 5 6 and then end of the page and
that's how you would normally see the
script loading and at least in Chrome
what you end up seeing is that the
download process starts right away but
the execution is fairly linear in this
case so what can you do to kind of
experiment with this let me show you one
quick work that you can use let's say
you want to defer the processing of the
first script you can just add the word
call defer here and if you just did that
let's see what happened what you should
normally see is that the app 1 should be
processed the last and this is indeed
the case at least in Chrome so you can
see that the app 1 is getting processed
the last and which is fairly good if
that's what you want to do that you can
change the order of processing of these
and to improve it another verb you can
use normally is called async
it basically means you can start this
processing of the scripts he said
and according to the specs I believe
that these scripts can be downloaded in
parallel and then can they be executed
one after another and that's experiment
with that and basically what I've done
is I change all of this work to a Singh
so they can all be run in a synchronous
me
and we'll see the end of the page being
displayed pretty much right away so
let's just do this say here you can see
the end of the page is displayed right
away and the scripts are executing
asynchronously and once they are
executed you will see the information so
you can do this essentially use this
works for external scripts async and
effort to improve the web loading of the
page if you want to learn more you can
also go into this article which I really
like is the html5 rocks and it's called
how to do the murky water source script
loading basically if you want to learn
more about there's another stuff you can
just go to JavaScript and that's where I
would put this video on and I will also
put the link to this html5 rock
information thanks for watching this
short video and have a great time
