In web development, scripting is a fundamental part of bringing our pages and applications to life. Among the most used tags in HTML to include scripts are <script> y <iframe>. These tags allow us to link to external JavaScript files or write code directly into them.
The defer attribute
The defer attribute is used in the tag <script> to indicate that the JavaScript file should be executed once the HTML document has been fully loaded. This feature is especially useful when the script needs to access DOM elements that have not yet been loaded at the time of execution.
By adding the defer attribute to the script, you tell the browser not to block rendering of the content while it waits for the JavaScript file to finish loading and executing. This means that the script will be downloaded in parallel along with the other document resources, but its execution will be postponed until the DOM tree has been built.
Using the defer attribute also ensures that scripts are executed in the order in which they appear in the document, unlike the async attribute, which we will discuss later.
The async attribute
The async attribute, also used in the tag <script>, has a similar behavior to the defer attribute in terms of loading the JavaScript file, but with a fundamental difference: the script will be downloaded and executed asynchronously, without waiting for the HTML document to be completely loaded.
This can be useful in cases where the script does not need to access the DOM tree to function correctly or does not depend on the full state of the page. By using the async attribute, the script will not block the rendering of the content, thus improving the page loading speed.
It is important to note that when using the async attribute, the order of script execution is not guaranteed. If you rely on a specific order, it is recommended to use the defer attribute or load the scripts sequentially.
Frequently asked questions
When should I use the defer attribute?
You should use the defer attribute when you need to access the DOM tree in your script and want to ensure that the HTML document has been completely loaded before running it. This is especially useful when working with elements that are dynamically generated in the DOM.
When should I use the async attribute?
The async attribute is useful when the script does not need to access the DOM tree or does not depend on the full state of the page to function correctly. It is also useful when you want to improve page loading speed, as the script will download and run without blocking content rendering.
Is it necessary to specify the defer or async attribute in the tag ?
No, it is not necessary. If none of the attributes are specified, the script will run synchronously, blocking rendering of the content.
Can I use both attributes in the same tag ?
No, it is not possible to use both attributes on the same tag. You must choose between defer or async, depending on your needs and load requirements.
In conclusion, the defer and async attribute allow us to control when a JavaScript file is loaded and executed on our web pages. Proper use of these attributes can improve loading speed and user experience. Remember to choose the option that best suits your needs and follow web development best practices.
English 
Spanish