Before we conclude this section, I need to take a few minutes to talk about deploying JavaScript. There are some things that are important to know, as you begin to write your JavaScript and deploy it in a web page. So let's take a look at those concepts. First, some considerations in regards to JavaScript performance. And by JavaScript performance. I mean, how can we speed up the downloading of the JavaScript code so that the user doesn't have to wait an extra few milliseconds or whatever it is, before they can interact with the page or before they see something happen on the page.
So first off, you should combine scripts. Now, it's very possible as you get into a large project that you have more than one JavaScript file. This can help you organize your files In addition, you may be using external libraries. And so that will be a separate JavaScript file. So in a situation like that, you would have more than one script tag, you'd have to have a separate script tag to identify each JavaScript file which you need to load as a part of this HTML page. Well, if you have a situation like that in a project, you should combine all of those JavaScript files together at the time you deploy.
Now, obviously, you don't want to do this during development, because then it can make it hard to debug and understand the code. But when you're ready to deploy, then you can have a separate build folder where you place your deploy files, and as a part of that process, you combine all of this script together. Now there are some bundler or build tools that can help you with this. So you don't have to do this. manually, for example, browserify and web pack and roll up are bundler tools that can help you combine scripts. Also some some of the build tools like Gulp and grunt can assist with that.
And those types of tools become an important part of your development process. Okay, now in addition to combining script, you need to minify your code. Now, what does that mean to minify your code? Basically, what minification does is it removes all of the unnecessary whitespace and comments from your code. So your code ends up to be on a single line. There's no carriage returns, or anything like that.
And all the comments are removed. Now what that does is that reduces the size of your code. In fact, minification can sometimes reduce the size of your JavaScript file by 50%. Now there's also some minification Pro grams that change the variable names to smaller single characters or one or two characters that can also reduce the size because you're eliminating characters. Now the smaller the size, the faster the JavaScript file is going to download into the HTML page. Now, of course, minification should once again be done in the public or the build code, not in your development code, so you have a separate build folder.
When you're ready to deploy, you minify your code. The same tools I mentioned with the combined scripts can help with minification. Now, let me jump out to our event reporter, and I want to show you the minified code for the event reporter. Here's our code file or JavaScript file. Notice there's comments in it. We can read it.
There's a lot of tabs and that kind of spaces. It makes it more readable When it's minified may look like this one single line, I have line wrap on. So we can see all of the code, but it's still on one line, and all the comments are removed. Now, this is not a full minification. It didn't change the variable names, but you get the idea of what minification can do. And this reduces the size of your JavaScript file.
Now, obviously, this would be very difficult to work with as a developer. So that's why minification is part of your deploy. Next item is you can use a content delivery network to deliver your JavaScript files. So these are files that are on a distributed network that have several locations around the world. And it serves up the files much faster. That can reduce time as well.
In fact, many JavaScript libraries have have their files placed on a content delivery network, so you can use the CDN to link to those files. And with JavaScript libraries. A second advantage is that if that particular user has been on a website that already uses that library, then that library would be cached. And so it wouldn't have to be downloaded again. And that can save time as well. Finally, the last consideration is to prevent blocking with your script tags.
Now, in order to understand what blocking is, I need to describe how an HTML file works once it's received into the browser. So when you are about to view an HTML file, you request that HTML file from the server. The server delivers that HTML file to the browser. The browser begins parsing through that and downloading other assets such as images, etc. As soon as it finds a script tag. All downloading stops, and it begins to download that JavaScript file.
And that downloading will not continue until that JavaScript file is downloaded, parsed and executed. That is what we refer to as blocking those script tags can cause the downloading of the HTML file to be blocked for a time. Now, obviously, we're talking about milliseconds here with all of these things, but those milliseconds add up, and it can be noticeable by the user. So let's take a look at some techniques that can be used to prevent blocking. First and simplest and the oldest technique is to place the script tag at the end of the body tag. So let's take a look at that technique.
For our event reporter right now our script tags at the top So I'm going to do two things. I'm going to change the source to my minified version. And then I'm going to move the script tag down to the bottom of the body tag. Save that. Now I just want to refresh it to make sure everything is still working any. Anytime you do something like this, you want to make sure that your deploy processes haven't broken anything.
And things look good. So that's technique number one. The second technique is to use defer and async attributes. These are attributes that can be associated with a script tag. For example, I could add the defer attribute, just like that in the script tag, or the async attribute now Let me explain the difference of these two. When the defer attribute is a part of a script tag, the HTML file doesn't stop downloading other stuff, it downloads the JavaScript file in parallel with whatever else it's downloading.
And then once everything on the page is downloaded, it parses and executes the JavaScript file. So that's if we have a defer attribute with the script tag. Now the async attribute is new with html5. Now the async attribute is a bit different. When a script tag is encountered with the async attribute. The JavaScript file is still downloaded in parallel with other things that are being downloaded.
But as soon as that JavaScript file finishes downloading, the other downloads on the HTML file stop until the JavaScript file is parsed and executed. So that's the difference between defer and async. defer waits to parse and execute until the entire HTML file is parsed and downloaded. async will do that as soon as the JavaScript file is downloaded. All right, one more technique that you can use, that is using a dynamic script tag. Now, what do we mean by a dynamic script tag?
Well, that simply means that you include a script tag that uses a few lines of JavaScript to attach your external JavaScript file. So what that does is because it's just a few lines of JavaScript, it doesn't block HTML downloads very long. So let's look at that technique. So I simply have an opening and closing script tag. I'm going to write Some JavaScript inside those script tags, this is now inside the HTML file. So up to this point we've been including JavaScript as external files.
And that's the way you should include JavaScript. But since the code for dynamic loading is so short, it just makes sense to include it right here in HTML file inside of the script tag. So I'm first going to declare variable script and set it equal to document dot create element. script. Create element is another method for manipulating the DOM. Basically, what it does, it creates a node.
The type of node it's going to create is using a script tag. Now we set the source of that script tag equal to our external file and then we sit Simply add the node to our HTML document. So we do that with an append child command. And I'm appending the child to the body tag, so it's going to add it at the end of the body tag. Let me save that. And let's just see if everything still works.
We're going to refresh. And sure enough, things still work. And we've been able to increase the performance of our HTML file by tweaking what happens with our JavaScript file. So those are some important concepts to remember when you're ready to deploy. When you've completed your testing, you completed everything and you're ready to make it live. These will help the performance and therefore the satisfaction of the users should be greater