HTML Topics
- HTML Intro
- HTML Basic
- HTML Editors
- HTML CSS
- HTML Tags
- HTML Deprecated Tags
- HTML Events
- HTML Event Attributes
- HTML Global Attributes
- HTML Attributes
- abbr
- accept
- accept-charset
- accesskey
- action
- align
- alt
- archive
- as
- async
- autocapitalize
- autocomplete
- autofocus
- autoplay
- axis
- bgcolor
- border
- cellpadding
- cellspacing
- char
- charoff
- charset
- checked
- cite
- class
- classid
- codebase
- codetype
- color
- cols
- colspan
- compact
- content
- contenteditable
- controls
- coords
- crossorigin
- data
- data-*
- datetime
- declare
- default
- defer
- dir
- dirname
- disabled
- download
- draggable
- enctype
- enterkeyhint
- for
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- frame
- frameborder
- frameset
- headers
- height
- hidden
- high
- href
- hreflang
- hspace
- http-equiv
- id
- inert
- inputmode
- ismap
- kind
- label
- lang
- list
- loop
- low
- max
- maxlength
- media
- method
- min
- multiple
- muted
- name
- novalidate
- onabort
- onafterprint
- onbeforeprint
- onbeforeunload
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- oncopy
- oncuechange
- oncut
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onhashchange
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onoffline
- ononline
- onpagehide
- onpageshow
- onpaste
- onpause
- onplay
- onplaying
- onpopstate
- onprogress
- onratechange
- onreset
- onresize
- onscroll
- onsearch
- onseeked
- onseeking
- onselect
- onstalled
- onstorage
- onsubmit
- onsuspend
- ontimeupdate
- ontoggle
- onunload
- onvolumechange
- onwaiting
- onwheel
- open
- optimum
- pattern
- placeholder
- popover
- popovertarget
- popovertargetaction
- poster
- preload
- readonly
- rel
- required
- reversed
- rows
- rowspan
- sandbox
- scope
- selected
- shape
- size
- sizes
- span
- spellcheck
- src
- srcdoc
- srclang
- srcset
- start
- step
- style
- tabindex
- target
- title
- translate
- type
- usemap
- value
- width
- wrap
- HTML Comments
- HTML Entity
- HTML Head
- HTML Form
- HTML IndexedDB
- HTML Drag & Drop
- HTML Geolocation
- HTML Canvas
- HTML Status Code
- HTML Language Code
- HTML Country Code
- HTML Charset
- MIME Types
HTML defer Attribute
Photo Credit to CodeToFun
🙋 Introduction
The defer
attribute in HTML is used with the <script> element to indicate that the script should be executed after the HTML document has been completely parsed.
This attribute is especially useful for optimizing web page loading performance by deferring the execution of scripts until the document structure is fully loaded.
🎯 Purpose of defer
The primary purpose of the defer
attribute is to improve page load times by preventing scripts from blocking the HTML parsing process.
When a script is marked as "defer," it will be downloaded in the background while the HTML parsing continues. The script is then executed in order, once the parsing is complete.
💎 Values
The defer
attribute accepts a boolean value:
- defer: When set, it indicates that the script should be executed after the HTML document has been parsed. This is the value that activates the
defer
attribute. - (absence of the defer attribute): If the
defer
attribute is not present, or if its value is anything other than "defer," the script will be executed immediately, potentially blocking HTML parsing.
📄 Example
Let's look at a simple example of how to use the defer
attribute with a script element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Attribute Example</title>
<script defer src="myscript.js"></script>
</head>
<body>
<!-- Your HTML content here -->
</body>
</html>
🧠 How it Works
In this example, the defer
attribute is added to the <script> element, indicating that the script in myscript.js will be deferred until after the HTML document is parsed.
🔄 Dynamic Values with JavaScript
Similar to the autocomplete attribute, you can dynamically set the defer
attribute using JavaScript.
This can be useful when you want to conditionally load scripts based on certain criteria. Here's an example:
<script>
// Dynamically set defer for a script element
var scriptElement = document.createElement("script");
scriptElement.src = "dynamicScript.js";
scriptElement.defer = true;
document.head.appendChild(scriptElement);
</script>
🧠 How it Works
In this script, a new <script> element is created dynamically, and the defer
attribute is set to true. This can be beneficial when you need to load a script dynamically and ensure it doesn't block the HTML parsing process.
🏆 Best Practices
- Use the
defer
attribute for scripts that don't need to execute before the HTML document is fully parsed. - Avoid using defer for scripts that are essential for the page's functionality and need to execute immediately.
- Always test the behavior of scripts with and without the
defer
attribute to ensure proper functionality.
🎉 Conclusion
The defer
attribute is a valuable tool for optimizing web page loading performance by deferring the execution of scripts until after the HTML document has been parsed.
By using this attribute judiciously, you can strike a balance between script execution and page load speed.
👨💻 Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (HTML defer Attribute), please comment here. I will help you immediately.