revision:
When present, it specifies that the script is executed when the page has finished parsing. The attribute is only for external scripts (should only be used if the "src" attribute is present). The defer attribute can be used on the <script> element.
By default, HTML documents are parsed (read) from top to bottom, one line at a time.
This means that if you put any JavaScript at the top of your document, it will execute before the rest of your document is done parsing.
That's the default behavior of the script element.
But when you add "defer" to the <script> element you disable that default behavior.
Note: There are several ways an external script can be executed:
If "async" is present : the script is downloaded in parallel to parsing the page, and executed as soon as it is available (before parsing completes);
If "defer" is present (and not "async") : the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing;
If neither "async" or "defer" is present : the script is downloaded and executed immediately, blocking parsing until the script is completed.
Use "defer" for most scripts, especially those that need the full HTML/DOM to be ready and/or depend on other scripts.
Use "async" only for independent scripts, like analytics (Google Analytics, etc.), ads, chat widgets
<script src=". . .js" defer></script >
The defer attribute doesn't have an assignment operator (=) or value because its behavior is built-in.
The JavaScript code won't execute until the entire page is finished loading.
In a literal sense, defer means put off/postpone/wait.
Without "defer", JavaScript executes as soon as it is loaded.
With "defer", JavaScript waits to execute until the entire HTML page is loaded.
example
HTML codes:
<script src="demo_defer.js" defer></script>