Menu
I'm trying to understand async & defer HTML 5 attributes. Here is my testing code:
<body>
<script type="text/javascript" src="script.js" **defer**></script>
<div id="div1">
Abc
</div>
</body>
script.js:
document.write("Hello World!")
As I understand, and according to the definition, "defer ... specifies that the script is executed when the page has finished parsing" shouldn't the output be:
Abc
Hello World!
instead of
Abc
which is the case?
Why does the document.write() not work with defer?
The answer "document.write clears page" doesn't take into account defer attribute. The resulting final answer is similar but my question was asked from another perspective.
757
defer. This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded . Scripts with the defer attribute will prevent the DOMContentLoaded event from firing until the script has loaded and finished evaluating.
The defer property sets or returns whether a script should be executed when a page has finished parsing, or not. This property reflects the defer attribute of the <script> tag. Note: The defer attribute is only for external scripts (and should only be used if the src attribute is present).
In practice, defer is used for scripts that need the whole DOM and/or their relative execution order is important. And async is used for independent scripts, like counters or ads. And their relative execution order does not matter.
If you open the JavaScript console on Chrome you will see the following message:
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.
Not executing the document.write from deferred (asynchronous) script makes sense. Take into account this:
defer indicates the browser to wait and execute the code when the document has been loaded and parsed.document.write writes to the document stream.document.write is called when the document is closed (loaded), then document.open is automatically called, the document is cleared and replaced with the content of document.write.Preventing the execution of document.write within a deferred script will prevent the page/document from being cleared and only showing the content of the document.write.
Also there would be the question of "where should the content be written?" In your question you expect a result of Abc Hello World, but I would expect Hello World Abc as I would still expect the content to be written right after the script tag instead of at the end of the document.
It would be better to use a different method that will be supported in asynchronous cases and that will give you control over where the content will be placed, like for example appendChild or insertBefore.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
