Execução de script assíncrona

O atributo async do elemento script permite que o script associado seja carregado e executado de forma assíncrona com relação ao resto da página. Isto é, o script é carregado e executado em segundo plano, enquanto a página continua a ser analisada. Para as páginas que utilizam scripts com uso intensivo de processamento, o atributo async pode aumentar significativamente o desempenho do carregamento da página.

O atributo async

O atributo async faz parte da especificação HTML5 do W3C (World Wide Web Consortium) e foi criado para situações em que não existem dependências em um script, mas o script ainda precisa ser executado o mais rápido possível. No exemplo hipotético a seguir, lembre-se de que, sem o atributo async (ou defer), um script pode bloquear o carregamento do conteúdo de outra página.

Lilah tem um blog pessoal que usa diversos widgets baseados em script. Esses widgets servem para melhorar a experiência dos visitantes, mas a página dela ainda será funcional sem que nenhum deles seja carregado (ela deseja oferecer suporte a usuários com scripts desabilitados). No momento, ela está carregando todos esses widgets no topo de seu arquivo HTML, mas tem recebido reclamações de que a página demora muito tempo para carregar por causa do tempo longo de execução dos scripts. Ela tentou mover os scripts para o final da página para acelerar o processo, mas ela tem tanto conteúdo que a experiência aperfeiçoada do seu site não funciona rápido o suficiente com essa mudança. O que ela realmente quer é que esses widgets carreguem o mais rapidamente possível, mas sem bloquear o resto da página. Depois de uma rápida pesquisa, ela percebe que o atributo async de HTML5 é exatamente o que ela precisa. Ao colocar todos os widgets baseados em script em um arquivo externo, o site dela volta rapidamente a ser operacional com um melhor equilíbrio entre desempenho e melhorias baseadas em script.


<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>


Detalhes da implementação

O Internet Explorer 10 e os aplicativos da Windows Store em JavaScript permitem os atributos async e defer do elemento script (o atributo defer é permitido em versões anteriores do Windows Internet Explorer). Os atributos async e defer só poderão ser usados se o atributo src estiver presente. Há quatro combinações possíveis, conforme mostrado a seguir.

UtilizaçãoDescrição

<script src="widgets.js"></script>

O script é executado imediatamente e a página aguarda que o script termine antes de continuar a análise. Isso pode reduzir significativamente o desempenho do carregamento da página.

<script async src="widgets.js"></script>

O script é baixado de forma assíncrona enquanto a página continua sendo analisada. O script é executado depois que o download for concluído.

<script defer src="widgets.js"></script>

O script é executado quando a página terminar a análise.

<script async defer src="widgets.js"></script>

O atributo async é cumprido, e o atributo defer é ignorado. Isso permite que os desenvolvedores usem async em navegadores que ofereçam suporte, mas retornará a defer em navegadores que não tenham suporte a async.

 

Em resumo, async permite que os desenvolvedores da Web melhorem o tempo de carregamento da página com mínimo esforço. Ele também reduz o número de soluções alternativas específicas do navegador necessárias para bibliotecas de carregador de script.

Referência de API

async
defer

Demonstrações do Test Drive do Internet Explorer

Scripts assíncronos em HTML5

Postagens no blog do IE

Programação assíncrona em JavaScript com "promessas"

Especificação

HTML5: Seção 4.3.1

 

 

Mostrar:
© 2014 Microsoft. Todos os direitos reservados.