Async and Defer may look to have the same function but they are actually quite different. Usually its best to use Defer even though Async looks tastier😁. Though that's not to say you can't use Async. In this post I'll speak about what they both do and when you should use either one. So, let's begin. **SCRIPT TAG IN THE HEAD WITH NO ASYNC OR DEFER** Before we begin looking at script loading with async and defer, lets look at a script tag with none of them loaded in the head of the document. An example could look like this: ``` ``` When the browser is typically parsing an HTML document, it will stop parsing the HTML doc the moment it encounters a ` ``` Async can randomize the order of execution while defer will respect the sequence order. - Defer waits for the [DOM (Document Object Model)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) while Async does not. Defer will wait for the DOM to fully load before it executes. Async will not. This means if your `script` requires the DOM you should use defer. If you use Async in this scenario you stand the chance that element you need cannot be found which can lead to bugs. Here are some general rules on when to use either: 1. If the script does not rely on any other scripts or if it does not require the DOM then you can use **Async**. 2. If you want to load scripts in the middle of your HTML you can use **Async**. Since the DOM is already present, the `script` can be executed immediately without any problems. 3. You should use **defer** for all other scripts because: - It gets loaded ASAP which reduces load time. - It respects the script order letting you structure which script will come first. - It only executes once the DOM is ready. **CONCLUSION** In conclusion, it usually better to use defer because it has more advantages over Async in most use cases even though Async can sound much better. If you found this article useful or if you spotted an error drop me a line in the comments i'd love to hear you opnions😁.

shemjay

Defer vs Async Attributes

Join Our Newsletter. No Spam, Only the good stuff.