About the boolean attribute defer and async vs optimization

19

The use of async and defer for optimization is a good subject to play when we want pages loaded faster and also without blocking problems.

Questions:

  • Using async , if the browser does not support it, it ignores the attribute and lowers / executes the script normally, or does it simply ignore it, not loading it?
  • Considering that the goal of async and defer , is to load the scripts without interrupting / blocking page rendering, it would not be the same as putting them (the scripts) before </body> ? Or by loading asynchronously, is it faster since it does not depend on rendering to complete?
  • Libraries for asynchronous loading, such as LABjs , are still are useful in view of these attributes ( async/defer )? Or they are somehow more secure, ensuring asynchronous loading independent of the browser version?
  • Considering that defer allows the script to be loaded from asynchronous form, but only allows its execution after the rendering, it may be better than async , since it executes after the even though the rendering is still occurring?
asked by anonymous 10.01.2015 / 21:53

1 answer

19
  

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.

11.01.2015 / 01:56