Skip to main content
adicionou 579 caracteres ao conteúdo
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114
<!--
  Serão baixados todos ao mesmo tempo e executados após o download.
  Não tem comoEles saberserão emrequisitados queparalelamente ordeme elesexecutados serãona executadossequência.
-->
<script async src='a.js'></script>
<script async src='b.js'></script>
<script async src='c.js'></script>
<!--
  Serão baixados todos ao mesmo tempo e executados somente quando a
  renderização do documento estiver concluída. Assim como o 'async',
  não tem comoeles saberserão emrequisitados queparalelamente ordeme elesexecutados serãona executadossequência.
-->
<script defer src='a.js'></script>
<script defer src='b.js'></script>
<script defer src='c.js'></script>

Não vejo um sendo melhor que o outro pois não servem para a mesma coisa, embora ambos fazem o download do script sem interromper a renderização mas o modo como esses scripts serão executados funciona de forma diferente.

Scripts que utilizam atributo async e defer fazem uma diferença maior quando eles não estão localizados tão no final do documento. Como a análise do HTML ocorre da esquerda para direita, de cima para baixo, começando pelo o primeiro elemento declarado <html>, até quando ele seja fechado. Se algum script está localizado logo antes do elemento </body>, torna-se redundante o uso dos atributos async e defer.

Como a análise do documento já está quase completa naquele momento, esses elementos script não tem muito o que bloquear.

<!--
  Serão baixados todos ao mesmo tempo e executados após o download.
  Não tem como saber em que ordem eles serão executados.
-->
<script async src='a.js'></script>
<script async src='b.js'></script>
<script async src='c.js'></script>
<!--
  Serão baixados todos ao mesmo tempo e executados somente quando a
  renderização do documento estiver concluída. Assim como o 'async',
  não tem como saber em que ordem eles serão executados.
-->
<script defer src='a.js'></script>
<script defer src='b.js'></script>
<script defer src='c.js'></script>

Não vejo um sendo melhor que o outro pois não servem para a mesma coisa, embora ambos fazem o download do script sem interromper a renderização mas o modo como esses scripts serão executados funciona de forma diferente.

<!--
  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>
<!--
  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>

Não vejo um sendo melhor que o outro pois não servem para a mesma coisa, embora ambos fazem o download do script sem interromper a renderização mas o modo como esses scripts serão executados funciona de forma diferente.

Scripts que utilizam atributo async e defer fazem uma diferença maior quando eles não estão localizados tão no final do documento. Como a análise do HTML ocorre da esquerda para direita, de cima para baixo, começando pelo o primeiro elemento declarado <html>, até quando ele seja fechado. Se algum script está localizado logo antes do elemento </body>, torna-se redundante o uso dos atributos async e defer.

Como a análise do documento já está quase completa naquele momento, esses elementos script não tem muito o que bloquear.

removeu 314 caracteres do conteúdo
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

Testes [async]

A Microsoft possui uma página para testes com async para o Internet Explorer, mas que pode ser vista e os testes executados por qualquer outro navegador: Test drive demo: HTML5 async. Nele você pode ver como são executados o mesmo script de modos diferentes pelo uso do atributo.

Testes [async]

A Microsoft possui uma página para testes com async para o Internet Explorer, mas que pode ser vista e os testes executados por qualquer outro navegador: Test drive demo: HTML5 async. Nele você pode ver como são executados o mesmo script de modos diferentes pelo uso do atributo.

Fim da Recompensa com 50 pontos de reputação concedidos por Ale
Revisão
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

O async é um atributo novo já o defer, se não me engano foi implementado pela Microsoft há muito tempo e então os demais navegadores passaram a dar suporte nas versões mais novas. Você pode usar a técnica de combinar os dois atributos para impedir o bloqueio da renderização e continuar baixando os scripts em segundo plano:

Se o navegador do usuário suportar ambos os atributos, async prevalecerá. Caso não suporte async, o atributo será ignorado e então defer será utilizado. Importante: A ordem de execução após o download é diferente e será explicada na próxima pergunta.

E só para deixar mais claro que não é a mesma coisa. Antes de </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. -->

Já com async:

<!-- 
 </body> Serão baixados todos ao mesmo tempo e executados após o download.
  Não tem como saber em que ordem eles serão executados.
-->
<script async src='a.js'></script>
<script async src='b.js'></script>
<script async src='c.js'></script>

E com asyncdefer:

<!--
  Serão baixados todos ao mesmo tempo e executados apóssomente oquando downloada
  renderização do documento estiver concluída. Assim como o 'async',
  Nãonão tem como saber em que ordem eles serão executados.
-->
<script asyncdefer src='a.js'></script>
<script asyncdefer src='b.js'></script>
<script asyncdefer src='c.js'></script>

Não vejo um sendo melhor que o outro pois não servem para a mesma coisa, embora ambos fazem o download do script sem interromper a renderização mas o modo como esses scripts serão executados funciona de forma diferente.

Testes [async]

A Microsoft possui uma página para testes com async para o Internet Explorer, mas que pode ser vista e os testes executados por qualquer outro navegador: Test drive demo: HTML5 async. Nele você pode ver como são executados o mesmo script de modos diferentes pelo uso do atributo.

O async é um atributo novo já o defer, se não me engano foi implementado pela Microsoft há muito tempo e então os demais navegadores passaram a dar suporte nas versões mais novas. Você pode usar a técnica de combinar os dois atributos:

Se o navegador do usuário suportar ambos os atributos, async prevalecerá. Caso não suporte async, o atributo será ignorado e então defer será utilizado.

E só para deixar mais claro que não é a mesma coisa:

<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. -->
<!-- </body> -->

com async:

<!--
  Serão baixados todos ao mesmo tempo e executados após o download.
  Não tem como saber em que ordem eles serão executados.
-->
<script async src='a.js'></script>
<script async src='b.js'></script>
<script async src='c.js'></script>

Não vejo um sendo melhor que o outro pois não servem para a mesma coisa, embora ambos fazem o download do script sem interromper a renderização mas o modo como esses scripts serão executados funciona de forma diferente.

O async é um atributo novo já o defer, se não me engano foi implementado pela Microsoft há muito tempo e então os demais navegadores passaram a dar suporte nas versões mais novas. Você pode usar a técnica de combinar os dois atributos para impedir o bloqueio da renderização e continuar baixando os scripts em segundo plano:

Se o navegador do usuário suportar ambos os atributos, async prevalecerá. Caso não suporte async, o atributo será ignorado e então defer será utilizado. Importante: A ordem de execução após o download é diferente e será explicada na próxima pergunta.

E só para deixar mais claro que não é a mesma coisa. Antes de </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. -->

Já com async:

<!-- 
  Serão baixados todos ao mesmo tempo e executados após o download.
  Não tem como saber em que ordem eles serão executados.
-->
<script async src='a.js'></script>
<script async src='b.js'></script>
<script async src='c.js'></script>

E com defer:

<!--
  Serão baixados todos ao mesmo tempo e executados somente quando a
  renderização do documento estiver concluída. Assim como o 'async',
  não tem como saber em que ordem eles serão executados.
-->
<script defer src='a.js'></script>
<script defer src='b.js'></script>
<script defer src='c.js'></script>

Não vejo um sendo melhor que o outro pois não servem para a mesma coisa, embora ambos fazem o download do script sem interromper a renderização mas o modo como esses scripts serão executados funciona de forma diferente.

Testes [async]

A Microsoft possui uma página para testes com async para o Internet Explorer, mas que pode ser vista e os testes executados por qualquer outro navegador: Test drive demo: HTML5 async. Nele você pode ver como são executados o mesmo script de modos diferentes pelo uso do atributo.

adicionou 81 caracteres ao conteúdo
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114
Carregando
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114
Carregando