Comentário: O carregamento assíncrono pode ser entendido como processamento simultâneo não bloqueador. No passado, usamos várias técnicas de JavaScript para fazer isso. Agora, o Webkit implementou o atributo assíncrono assíncrono da tag de script para html5. Amigos interessados podem aprender sobre isso.
(Nota do tradutor: o carregamento assíncrono pode ser entendido como processamento simultâneo não bloqueador.)Uma das razões pelas quais estou empolgado com o HTML5 é que ele implementa muitos recursos tão esperados no setor. Sempre precisamos exibir instruções em branco na caixa de entrada, mas todas são implementadas no JavaScript. Também queremos que todo o bloco seja clicável, que também é implementado usando o JavaScript.
O Webkit agora implementa a propriedade assíncrona assíncrona da tag de script para HTML5. No passado, costumávamos usar vários truques de JavaScript para fazer isso, mas agora novas propriedades facilitam o bloqueio.
Atributos assíncronos - html
Como mencionei anteriormente, adicionar o atributo assíncrono é muito simples:
<!-Especifique async e Onload de retorno de chamada->
<script assync src = "sitescript.js"> </script>
De fato, se o seu design de estrutura JavaScript e HTML forem razoáveis, 90% dos casos em que os elementos do seu script poderão ser carregados de forma assíncrona.
adiar - atributos html
O navegador Safari adiciona um atributo de adiamento adicional
<!-Especifique o adiamento, o efeito é semelhante ao assíncrono->
<script adiar src = "sitescript.js"> </sCript>
A diferença entre async e adiar
O blog oficial do Webkit explica a diferença entre async e adiar
--------------------------------------
Em circunstâncias normais, se o navegador encontrar um script externo ao analisar o arquivo de origem HTML, o processo de análise será pausado e uma solicitação será enviada para baixar o arquivo de script. Dom Parsing continuará a ser executado após o script ser totalmente baixado e executado. por exemplo:
<script src = myblockingscript.js> </sCript>
Durante o processo de download, o navegador está impedido de realizar outras tarefas úteis, incluindo analisar HTML, executar outros scripts e exibir o layout CSS. Embora os scanners de pré -carga do WebKit possam detectar multithreading durante a fase de download, ainda há um grande atraso de rede para algumas páginas.
Existem muitas técnicas para melhorar a velocidade da exibição da página, mas todas elas exigem habilidades adicionais específicas de código e navegador. Agora, o script não pode precisar executar scripts de forma síncrona adicionando atributos assíncronos ou adiados. O exemplo é o seguinte:
<script assync src = "myasyncscript.js"> </sCript>
<script adiar src = "myDeFerScript.js"> </script>
Nem o script de anotação assíncrona nem adiar serão baixados imediatamente sem pausar a análise HTML. Ambos os retornos de chamada do evento Onload OnLoad para resolver a inicialização que exige que o script seja executado.
A diferença entre os dois é a diferença na execução:
O script assíncrono será executado imediatamente após o download do arquivo de script e seu tempo de execução deve ser antes que o evento de carga da janela seja acionado. Isso significa que vários scripts assíncronos provavelmente não são executados na ordem em que aparecem na página.
Por outro lado, o navegador garante que vários scripts de adiamento sejam executados na ordem de sua ocorrência na página HTML e que o tempo de execução seja antes da conclusão da resolução DOM e o evento domcontent do documento seja demitido.
A seguir, é apresentado um exemplo que leva 1 segundo para baixar e 1 segundo para analisar outras operações. Podemos ver que todo o carregamento da página levou cerca de 2 segundos.
O mesmo exemplo, mas desta vez especificamos o atributo de adiamento do script. Porque quando o script de adiamento é baixado, outras operações podem ser executadas em paralelo, por isso é cerca de 1 vezes mais rápido.
--------------------------------------
Quais navegadores apóiam async e adiar
Também mencionado no artigo citado acima:
Além da nova versão do navegador com base no WebKit, o Firefox suporta as propriedades de adiamento e onload há muito tempo e adicionou o atributo assíncrono desde o FF3.6. O IE também suporta o atributo de adiamento, mas não suporta o atributo assíncrono. A partir do IE9, o atributo Onload também será suportado.
Aynsnc é incrível!
Fiquei tão feliz em ver o webkit implementar assync. O bloqueio é um enorme gargalo de desempenho para todos os sites, e poder especificar diretamente os arquivos de script assíncronos, sem dúvida, acelerará as páginas da web.