Hi everyone! In this article, I will tell you about JavaScript Async & Defer. In the world of web development, performance and user experience play important roles. There are many techniques and methods to make your pages load quickly and work properly. In this article, we’ll cover the async and defer features you can use to load your JavaScript files more efficiently. Are you ready? Then let’s start managing your JavaScript files more efficiently!🥳

Topics of this article:

Uploading Your JavaScript Files: The Basics
async: Asynchronous Loading of JavaScript Files
defer: Sequential Loading of JavaScript Files
Which Situation Should You Use?

Uploading Your JavaScript Files: The Basics✨

As you begin web development, you will find that JavaScript helps you increase the dynamism and functionality of your page. But it’s important to know how to add and load JavaScript files on your page.

You use the <script> tag to add JavaScript files to your page. This tag instructs the browser to process JavaScript codes. Here is a simple example:

<script src="script.js"></script>

In the example above, the JavaScript file named script.js is added to your page, and the browser downloads and runs it.

Order is important when adding JavaScript files to your page. For example, if a JavaScript file is dependent on another JavaScript file used within the page, the dependent file must be loaded first. Otherwise, you may get an error.

<script src="first.js"></script>
<script src="second.js"></script>

In the example above, the first.js file is loaded before the second.js file.

async: Asynchronous Loading of JavaScript Files✨

When adding JavaScript files to your page, you may sometimes want the file to not delay page loading. This is where the async feature comes into play. async ensures that the JavaScript file is loaded asynchronously and does not interfere with other page operations.

When you add the async attribute to a JavaScript file, the browser continues to load the page without preventing the file from being downloaded. The rest of the page is rendered while the file is downloaded and is executed immediately when the file is downloaded. This makes your page load faster because other processes don’t have to wait for the file to download.

<script src="dosya.js" async></script>

async can improve page performance, but there are some things to consider:

Asynchronously loaded files are executed when they access the page content. That’s why you should consider the dependency of the file on other elements of the page.
Note that when using async, files will be loaded out of order. If sequential loading of files is important, you may want to consider using defer.

async is very convenient in some scenarios:

For files that are not related to the core functionality of the page (for example, analytics tracking codes or advertising files).
Cases where the file is independent of the page content.

Below is an example of how to load JavaScript files using the async feature:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>async Feature Example</title>
</head>
<body>
 <h1>Message: <span id="message"></span></h1>
 
 <script src="file1.js" async></script>
 <script src="file2.js" async></script>
</body>
</html>

file1.js:

document.getElementById('message').textContent = 'File 1 Uploaded';

file2.js:

document.getElementById('message').textContent = 'File 2 Uploaded';

In the above example, since both JavaScript files are loaded with the async feature, they are executed without waiting for any queue. Therefore, the page will load faster.

defer: Sequential Loading of JavaScript Files✨

When adding JavaScript files to your page, sometimes you want the files to load and run sequentially. That’s where the defer property comes in handy.

When you add the defer attribute to a JavaScript file, the browser delays loading the page until the file has finished downloading. This means that the file will be run after the DOM tree is built. defer ensures that the file is loaded and executed sequentially.

<script src="file.js" defer></script>

An important thing to consider when using defer is that JavaScript files are run after the DOM tree is created. This means that your file can access the page content and perform its functionality. That’s why it’s important to include JavaScript files that are related to your page’s content using defer.

Some important points to remember when using defer are:

defer guarantees that the files are loaded sequentially. That’s why it’s useful for sequentially adding files with dependencies.
Using defer to improve the loading speed of your page can offer users faster loading times.

Below is an example of how to load JavaScript files sequentially using the defer property:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>defer Feature Example</title>
</head>
<body>
 <h1>Message: <span id="message"></span></h1>
 
 <script src="file1.js" defer></script>
 <script src="file2.js" defer></script>
</body>
</html>

file1.js:

document.getElementById('mesaj').textContent = 'File 1 Uploaded';

file2.js:

document.getElementById('mesaj').textContent = 'File 2 Uploaded';

In the above example, since both JavaScript files are loaded with the defer attribute, they are executed sequentially. This is useful when it is important to the functionality of your page.

Which Situation Should You Use?✨

It is important to choose the async and defer properties correctly when adding your JavaScript files to your page. Consider which feature you should use depending on your need and the needs of your project.

async Usage Scenarios:

async allows your JavaScript files to be loaded asynchronously without delaying the page load. Here are the scenarios where using async is appropriate:

Independent Files: You can use async if the JavaScript file is not linked to the rest of the page and is not waiting for page functionality or loading the file.
Page Content Independence: async is useful if the JavaScript file is independent of the page content and should not wait for other files to load.
Performance-Oriented: You can use async if you want to increase the loading speed of your page, and you don’t have to worry about the unordered loading of your file.

defer Usage Scenarios:

defer allows your JavaScript files to load and run sequentially, delaying page loading. Here are the scenarios where using defer is appropriate:

Sequential Dependency: If JavaScript files are dependent on each other, they must be loaded in the correct order.
Page Content: You should use defer if the JavaScript file handles page content and should run after the DOM tree is fully rendered.
Functionality Waiting: If your page’s functionality is waiting for a certain JavaScript file to load, you can use defer so that the file is loaded in the correct order.

Using the async and defer features while adding your JavaScript files to your page helps you control the loading performance and functionality of your page. Which feature you choose will depend on the needs of your project and your page. By making the right choice, you can optimize your page load time and improve the user experience. If you have questions, comments, or topic suggestions, please let me know. Your feedback helps me further improve my blog series. See you in the next article!

If you want to browse more resources, you can check out the links below:

Click if you want to contact me!👩🏻‍💻

You can support my articles by buying a coffee.☕️