Linha do tempo JS do fluxo de execução do Dom; adiar e assíncrono

Linha do tempo JS do fluxo de execução do Dom

1. Crie um objeto de documento e comece a analisar a página da web. Analise elementos HTML e texto. This stage document.readyState = 'loading'

2. Encounter link css externo, crie um thread para carregar e continue analisando o documento.

3. O JS de script externo do encontro, não definiu async, adiar, carregamento do navegador, bloqueio, aguardando carregamento e, em seguida, analisar o documento

4. Encontre o script JS externo e defina async, adie, o navegador cria um encadeamento para carregar, continue analisando o documento

   • assíncrono é executado após o carregamento

   • Após o adiamento do html ser analisado, a sequência de introdução é executada sequencialmente.

   • Proibir o uso de document.write Ps no script: ele limpará o fluxo de documentos

5. Ao encontrar img etc., os detalhes normais da estrutura dom são os primeiros, o navegador carrega o src de forma assíncrona e continua analisando o documento

6. Quando o documento é analisado, document.readyState = 'interativo'

7. Após a análise do documento, todos os scripts com adiamento serão executados na ordem de introdução;

8. O objeto de documento aciona o evento DOMContentLoaded, que também marca a execução do programa do estágio de execução do script de sincronização para o estágio orientado a eventos. Ou seja, eventos como cliques são aceitos no momento.

9. Quando todos os scripts assíncronos são carregados e executados, e img etc. são carregados, document.readyState = complete aciona o evento load.

10. A partir de então, a entrada do usuário, os eventos de rede etc. são tratados em uma resposta assíncrona.