Using async , if the browser does not support it, it ignores the attribute
and lowers / executes the script normally, or it simply ignores it,
not loading it?
It ignores only the attribute, the script is typically downloaded as if there was no defer or async , ie, blocking the parse of the page. You can better verify which browsers support these attributes through the links: async and defer .
async is a new attribute already defer , if I'm not mistaken it was implemented by Microsoft a long time ago and then the other browsers started to support the newer versions. You can use the technique of combining the two attributes to prevent rendering blocking and continue downloading the scripts in the background:
<script src='meuscript-js' async defer></script>
If the user's browser supports both attributes, async will prevail. If it does not support async , the attribute will be ignored and then defer will be used. Important : The order of execution after the download is different and will be explained in the next question.
Considering that the goal of async and defer , is to perform the
loading scripts without interrupting / blocking the rendering of the
page would not be the same as putting them (the scripts) before the
</body> ? Or because it loads asynchronously, it is faster since it does not
depends on rendering complete?
You should not only consider "asynchronously loading", it should be noted that each attribute has a behavior and serves a purpose.
Reference
async should be used for scripts that can be executed regardless of whether the document is ready or not. The script will be downloaded without interrupting the parse of the page and run soon thereafter. In the reference link above, an example that is very simple to illustrate are the Google Analytics scripts. It is not necessary for the DOM to be ready for them to run.
defer should be used for scripts that should be executed only when the document is ready. For example, a script that handles the click event in a <a> tag in the DOM.
And just to make it clear that it's not the same thing.
Before </body> :
<script src='a.js'></script> <!-- será baixado e executado. -->
<script src='b.js'></script> <!-- será baixado depois de 'a.js' e executado. -->
<script src='c.js'></script> <!-- será baixado depois de 'b.js' e executado. -->
Already with async :
<!--
Serão baixados todos ao mesmo tempo e executados após o download.
Eles serão requisitados paralelamente e executados na sequência.
-->
<script async src='a.js'></script>
<script async src='b.js'></script>
<script async src='c.js'></script>
And with defer :
<!--
Serão baixados todos ao mesmo tempo e executados somente quando a
renderização do documento estiver concluída. Assim como o 'async',
eles serão requisitados paralelamente e executados na sequência.
-->
<script defer src='a.js'></script>
<script defer src='b.js'></script>
<script defer src='c.js'></script>
Libraries for asynchronous loading, such as LABjs, are still
useful in view of these attributes (% with% /% with%)? Or are they from
certain way, ensuring asynchronous loading
independent of the browser version?
Here's the compatibility issue. I do not know these libraries but they certainly have the purpose (besides "asynchronous loading") to overcome the incompatibility of the browsers. If you do not want to have surprises with async and defer , use a library that treats this.
View this article in CSS-tricks
Whereas async allows the script to be loaded from
Asynchronous form, but only allows its execution after rendering, it
may be better than defer , since it executes after the
even though rendering is still occurring?
I do not see one being better than the other because they do not serve the same thing, although both download the script without interrupting the rendering but how these scripts will run works differently.
Scripts that use the defer and async attribute make a major difference when they are not located so far at the end of the document. Because HTML analysis occurs from left to right, top to bottom, starting with the first element declared async , until it is closed. If any script is located just before the defer element, it becomes redundant to use the <html> and </body> attributes.
As the document analysis is almost complete at that time, these script elements do not have much to block.
