Friday , 17 November 2017
Home / Programming / JavaScript / Script Tag – Advanced JavaScript Tutorial
Script Tag
Script Tag

Script Tag – Advanced JavaScript Tutorial

The script tag is how you include JavaScript into your document. However, there are a couple more things to know that can really optimize the performance of your site.

Script Tag Attributes

As you already know, placing your scripts at the bottom of your document allows everything else to load first before you start dynamically updating content. There’s another technique to load your script first, but prevent it from executing until the page has loaded.

Let’s create a file called index.html and add this bit of code.

Let’s focus on the script tag. I’m introducing a new attribute called defer. By adding this 1 simple attribute, you’re telling your browser to download this script, but not to execute it until the page is finished loading. This can be handy if you really don’t need to execute anything immediately.

HTML5 executes scripts in the order they were included. Update your body tags to this.

Your browser will download script.js, then script-2.js. However, your browser will run the code in script-2.js regardless if the rest of your site is finished downloading. The script.js file will only run until everything is downloaded because of the defer attribute.

Another useful attribute is the async attribute. It works similar to the defer attribute. The only difference is that your script is guaranteed to run the minute it’s finished download. Here’s an example, update your code to this.

As I started earlier, your browser will download and run each script in order. In the example above, script-2.js will run regardless if script.js is finished running or downloaded. It doesn’t matter if anything else is finished downloading. By adding the async attribute, you can set up some variables and functions for other scripts to use later.

You should only use these 2 attributes on scripts that don’t rely on other scripts to execute. Use these attributes correctly and you could definitely increase the performance of your site. You can have a mixture of tags using async and defer and more than one tag can use these attributes.

No Scripting Support

From time to time, you may end up getting visitors with no scripting supports. This can be for 2 reasons

  • The visitor is visiting your site on an old browser that doesn’t support scripting.
  • The visitor has turned off JavaScript support.

This rarely happens, but just in case, it’s always good to have a backup plan. We’re going to learn a new tag called the <noscript> tag. It works like any other HTML tag. If a visitor’s browser has no JavaScript support, then anything inside the <noscript> tag will be displaayed. Here’s an example of how you would use it.

You can use any HTML tags inside this tag and they’ll display properly. This tag will only be displayed if the browser has no support for JavaScript. Otherwise, your browser will hide this tag for you if they do.

Conclusion

These are just small things that can make a big difference in performance. To learn more about the <script> tag, check out this link.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link