What Is The Fastest Way To Load JavaScript

Key Takeaways

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