Compilação Just-in-Time (JiT) vs Ahead-of-Time (AoT) no Angular


111

Eu estava me referindo esta documentação e me deparei com o conceito de compilação. Pode-se usar a compilação JIT ou AOT. No entanto, achei muito breve e preciso saber os seguintes pontos em detalhes,

  • Diferenças entre essas duas técnicas
  • Recomendação sobre quando usar o quê

Respostas:


148

JIT - Compile o TypeScript bem a tempo de executá-lo.

  • Compilado no navegador.
  • Cada arquivo compilado separadamente.
  • Não há necessidade de construir depois de alterar seu código e antes de recarregar a página do navegador.
  • Adequado para desenvolvimento local.

AOT - Compila o TypeScript durante a fase de construção.

  • Compilado pela própria máquina, via linha de comando (Faster).
  • Todo o código compilado junto, inlining HTML / CSS nos scripts.
  • Não há necessidade de implantar o compilador (metade do tamanho Angular).
  • Mais seguro, fonte original não divulgada.
  • Adequado para montagens de produção.

2
Além disso, experimentei um desempenho muito fraco ao usar a compilação Just-in-Time, especialmente em dispositivos Android mais antigos. Além disso, o intervalo de renderização no carregamento da primeira página é muito maior (em dispositivos Android mais antigos, até 10 segundos, dependendo do tamanho do seu projeto).
Felix Hagspiel de

29
O typescript não é compilado na hora certa, o navegador não pode fazer isso. Em ambos os casos, o texto é compilado durante o processo de construção.
Robouste

2
@Robouste: Isso é exatamente o que me confunde .. O que realmente é compilado antes do tempo e na hora certa .. (se TJS for compilado imediatamente). Quando eu solicito uma página no explorer, o javascript será baixado e executado no navegador, algum dos typedJs precisa ir para o navegador ??? não, de forma alguma ... Então, o que está sendo compilado com antecedência e just in time .. ?? Na verdade, é o compilador angular. este link responderá a todas as perguntas: " angular.io/guide/aot-compiler "
Assil

2
Não sou um especialista, mas ao usar JIT, as fontes angulares são enviadas para o navegador e ele irá compilar o aplicativo. Ele permite que você tenha coisas dinâmicas que precisam ser compiladas em tempo de execução. Com AOT, tudo é pré-compilado para que o servidor envie um site comum em javascript. Você ganha velocidade de execução e menor tempo de carregamento.
Robouste

resposta excelente, comentários também úteis para mim.
Rakshit Shah

61

Embora existam algumas respostas, eu gostaria de adicionar algumas das minhas descobertas também, porque eu estava realmente confuso com o que realmente está sendo compilado, pois em todos os casos, TS-> a JSconversão acontece. Estou pegando alguns parágrafos do blog do Jeff como referência.

JIT

O TScódigo escrito pelo desenvolvedor é compilado em JScódigo. Agora, este jscódigo compilado é compilado pelo navegador novamente para que htmlpossa ser renderizado dinamicamente de acordo com a ação do usuário e, consequentemente, os códigos para angular (para componentes, detecção de mudança, injeção de dependência) também são gerados em tempo de execução.

(O compilador de navegador é o que pega as diretivas e componentes de um aplicativo, junto com seus HTML e CSS correspondentes, e cria fábricas de componentes para eliminar rapidamente as instâncias com toda a lógica de criação de visualização.)

Quando um aplicativo Angular 2 é inicializado no navegador, o compilador JIT executa muito trabalho para analisar os componentes do aplicativo em tempo de execução e gerar código na memória. Quando a página é atualizada, todo o trabalho que foi feito é jogado fora, e o compilador JIT faz o trabalho novamente.

AOT

O TScódigo escrito pelo desenvolvedor é compilado para JScódigo, este js já foi compilado para o angular também . Agora, este código compilado js é compilado pelo navegador novamente para que htmlpossa ser renderizado. Mas, o problema aqui é que os recursos do angularjá foram tratados pelo AOTcompilador e, portanto, o navegador não precisa se preocupar muito com a criação de componentes, detecção de alterações e injeção de dependência. Então nós temos :

Renderização mais rápida

Com AOT, o navegador baixa uma versão pré-compilada do aplicativo. O navegador carrega o código executável para que possa renderizar o aplicativo imediatamente, sem esperar para compilar o aplicativo primeiro.

Menos solicitações assíncronas

O compilador inline templates HTML externos e folhas de estilo CSS dentro do aplicativo JavaScript, eliminando solicitações separadas de ajax para esses arquivos de origem.

Tamanho menor de download da estrutura Angular

Não há necessidade de baixar o compilador Angular se o aplicativo já estiver compilado. O compilador é quase a metade do próprio Angular, portanto, omiti-lo reduz drasticamente a carga útil do aplicativo.

Detecte erros de modelo mais cedo

O compilador AOT detecta e relata erros de vinculação de modelo durante a etapa de construção antes que os usuários possam vê-los.

Melhor segurança

AOT compila modelos e componentes HTML em arquivos JavaScript muito antes de serem entregues ao cliente. Sem modelos para ler e sem avaliação arriscada de HTML ou JavaScript do lado do cliente, há menos oportunidades para ataques de injeção.


As diferenças restantes já foram abordadas nos tópicos de Benyamin, Nisar e Gaurang.

Sinta-se à vontade para me corrigir


5
Obrigado. Eu finalmente entendi depois de ler sua resposta e li muitas delas.
Mario Subotic

24

Benyamin e Nisar mencionaram alguns pontos positivos aqui. Eu vou adicionar a isso.

Embora teoricamente, AOT pareça uma opção atraente do que JIT para fins de produção, mas eu tinha minhas dúvidas se AOT realmente vale a pena!

Bem, eu encontrei boas estatísticas de Jeff Cross e isso prova que AOT reduz significativamente o tempo de inicialização do aplicativo. Abaixo, o instantâneo da postagem de Jeff Cross lhe dará uma ideia rápida sobre isso,

insira a descrição da imagem aqui


19

Compilação JiT (Just in Time)

O próprio nome descreve o funcionamento, ele compila o código apenas na hora de carregar a página no navegador. O navegador fará o download do compilador e construirá o código do aplicativo e o renderizará.

Será bom para o ambiente de desenvolvimento.

Compilação AoT (Ahead of Time)

Ele compila todo o código no momento da construção do aplicativo. Portanto, o navegador não deseja baixar o compilador e compilar o código. Neste método, o navegador pode facilmente renderizar o aplicativo apenas carregando o código já compilado.

Pode ser usado no ambiente de produção

Podemos comparar a compilação JiT e AoT conforme abaixo

insira a descrição da imagem aqui


1
Isso significaria que o aplicativo JiT carregaria mais rápido na primeira vez, mas depois disso o aplicativo AoT sempre carregaria mais rápido?
JKL

Nunca. JiT carrega mais devagar do que AoT
vivekkurien

AOT é mais lento do que JIT porque não é compatível em tempo de execução. você tem que mudar os títulos jit e aot
Mr.AF

resposta soberba !! : +1 obrigado!
Mateen

17

JIT (Compilação Just-in-Time)

Just-in-Time (JIT) é um tipo de compilação que compila seu aplicativo no navegador em tempo de execução.

ng build
ng serve

insira a descrição da imagem aqui

AOT (Compilação Ahead-of-Time)

Ahead-of-Time (AOT) é um tipo de compilação que compila seu aplicativo no momento da construção.

ng build --aot
ng serve --aot

insira a descrição da imagem aqui


2
que diferença entre essas 2 figuras? não precisa de introdução?
Mr.AF 01 de

Basicamente, o Ahead-of-Time é mais parecido com o Ahead-of-Runtime.
Alireza Kahaei

@ Mr.AF acabou de notar que agora também as imagens são as mesmas.
Tiago Martins Peres 李大仁 06/07

14

No final do dia, AOT (Ahead-of-Time) e JIT (Just-in-Time) fazem as mesmas coisas. Ambos compilam seu código Angular para que ele possa ser executado em um ambiente nativo (também conhecido como navegador). A principal diferença é quando a compilação acontece. Com AOT, seu código é compilado antes do download do aplicativo no navegador. Com o JIT, seu código é compilado em tempo de execução no navegador.

Aqui está a comparação: insira a descrição da imagem aqui

Benefícios do AOT:

  • Inicialização mais rápida, pois a análise e a compilação não acontecem no navegador.
  • Os modelos são verificados durante o desenvolvimento (o que significa que todos os erros que vemos no console javascript nos aplicativos em execução serão lançados em nosso processo de construção).
  • Tamanho de arquivo menor, pois os recursos não utilizados podem ser eliminados e o compilador em si não é enviado.

4

Na verdade, existe apenas um compilador Angular. A diferença entre AOT e JIT é uma questão de tempo e ferramentas. Com AOT, o compilador é executado uma vez no momento da construção usando um conjunto de bibliotecas; com o JIT, ele é executado sempre para cada usuário em tempo de execução, usando um conjunto diferente de bibliotecas.


2

Compilador JIT que usamos durante o desenvolvimento do projeto angular. Nesta compilação (conversão de TS para JS) acontece durante o tempo de execução da aplicação. Enquanto AOT é usado durante a construção do código do aplicativo para a implantação do aplicativo em produção, dessa vez construímos nosso código do aplicativo usando o comando ng build --prod que gera uma pasta chamada webpack, webpack contém o pacote de todos os arquivos (HTML , CSS e typescript) em formato javascript compactado.

O tamanho da pasta webpack gerada para a produção é bem menor do que a pasta gerada para o ambiente de desenvolvimento (usando o comando ... ng build), pois não contém o compilador dentro da pasta webpack, melhora o desempenho da aplicação .

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.