JavaScript - Tag Script - Async & Defer

Ao testar uma página da web ou o site, pode haver um requisito para observar o tempo decorrido no carregamento de funcionalidades. Por exemplo, anexando as funcionalidades adicionadas a um certo limite. Nesses casos, as tags de script “assíncrono" e "adiar”Os atributos desempenham um papel vital em ajudar o desenvolvedor em grande parte.

Este artigo descreverá a diferença entre atributos assíncronos e adiados usando JavaScript.

JavaScript - Tag Script - Async & Defer

O "assíncrono" e "adiar”São os atributos do“”Tag, e ambos têm funcionalidades diferentes:

• O "assíncrono”O atributo permite que Dom busque e execute o script enquanto executa o HTML.
• O "adiar”O atributo baixa o arquivo de script, aguarda para terminar a execução do DOM e depois executa o arquivo de script.

Exemplo
Vamos passar pelo exemplo a seguir:

Nas linhas acima do código:

• Inclua o “”Tags referentes aos arquivos externos separados“assíncrono.JS" e "adiar.JS" dentro do "" marcação.
• Depois disso, vamos criar “463"Botões com codificação"Botão clique*463”E depois pressione a guia.

Vamos discutir o “assíncrono”Funcionalidade do atributo:

Deixe asyncvalue = documento.QuerySelectorAll ('Button');
console.LOG ('Contagem de botões de atributo assíncrona: $ asyncvalue.comprimento');

No assíncrono.Arquivo JS, aplique as seguintes etapas:

• Acesse os botões criados usando o “QuerySelectorAll ()”Método.
• Depois disso, aplique o “comprimento”Propriedade em combinação com o“Literais de modelo”Para exibir a contagem dos botões de modo que o script seja executado enquanto a página continua a análise.

Agora, confira o “adiar”Funcionalidade do atributo:

Deixe DeferValue = documento.QuerySelectorAll ('Button');
console.LOG ('Adjunto de adqurião contagem de botões: $ defervalue.comprimento');

Nas linhas de código acima, considere as etapas abaixo do ponto:

• Da mesma forma, acesse os botões criados através do “QuerySelectorAll ()”Método.
• Da mesma forma, repita o procedimento discutido para devolver a contagem de botões através do “comprimento" propriedade.
• Nesse cenário, o arquivo de script será executado depois que a análise Dom estiver totalmente concluída.

Saída

A diferença entre os dois atributos declarados pode ser analisada com a ajuda da contagem gerada.

Conclusão

No "assíncrono”Atributo, o script é executado enquanto a página ainda está analisando, enquanto o“adiar”O atributo aguarda até que o modelo de objeto de documento (DOM) seja totalmente executado. Este artigo declarou as diferenças entre os “assíncrono" e "adiar”Atributos em JavaScript com a ajuda de exemplos.