Já existem muitas maneiras de otimizar o NG online. O núcleo é sobre os atributos internos do escopo dos observadores de $$. Hoje vou falar sobre outra coisa, a essência permanece inalterada porque essa é uma falha de Ng. No entanto, acredito que, desde que você use métodos apropriados, esses problemas ainda podem ser evitados.
Introdução
O AngularJS é abreviado como NG, que é uma estrutura MVVM produzida pelo Google. Isso melhora a eficiência do desenvolvimento dos projetos de front-end (na prática, pode realmente melhorar a eficiência do desenvolvimento). Ele usa controladores, instruções e serviços para girar em todo o projeto e usa DI exclusivo para resolver os problemas de chamada antes da terceira camada. Para mais detalhes, consulte a análise do código -fonte NG que escrevi antes.
Ng de ferida dura
Quando se trata de falhas, devemos primeiro falar sobre seu princípio simples de ligação de dados
O modelo definido em cada página em Ng adicionará um ouvinte ao escopo atual. O contêiner interno é a matriz $$ Wachers. Enquanto qualquer modelo na página mudar, o método $ Digest dentro do escopo será acionado. Ele procurará todos os modelos na árvore de escopo atual, por sua vez, para garantir que os modelos na página possam obter sincronização de dados, portanto isso é muito demorado. A declaração oficial é que, quando 2.000 ouvintes aparecem na página, o desempenho da página cairá significativamente. Portanto, para melhorar o desempenho do NG, você deve começar com esse aspecto.
Tip1: encadernação única
De fato, alguém já disse isso online. Aqui está um novo uso. A versão 1.3.0+ do NG já forneceu uma sintaxe integrada para apoiar a situação em que o modelo está vinculado apenas uma vez. Veja o seguinte exemplo:
código antigo
A cópia do código é a seguinte:
olá
novo código
A cópia do código é a seguinte:
olá
Você pode ver que a nova sintaxe é adicionar :: em frente ao modelo. Acredito que essa sintaxe é muito mais conveniente do que os plug-ins de terceiros usados online.
A cópia do código é a seguinte:
Tip2: $ SCOPE. $ DIGEST vs $ SCOPE. $ Aplicar
Eu acredito que muitas pessoas estão familiarizadas com o método $ Aplicar. Geralmente, é usado ao executar o código no ambiente NG, a fim de garantir a sincronização de dados da página, chamando o método $ APLAP após a execução do código desencadeará o $ Digest interno para verificar todos os modelos no escopo. De fato, isso é chamado dentro dele, e apenas alguns trechos de código estão escritos abaixo.
A cópia do código é a seguinte:
...
...
$ Rootscope. $ Digest
...
...
Todos eles estão realmente chamando o $ DIGEST sob o escopo da raiz de $ Rootscope. Então, qual é a diferença entre $ Digest sob escopos diferentes? De fato, a diferença mais importante é que
A cópia do código é a seguinte:
$ Digest apenas pesquisas profundas todos os modelos abaixo do chamador
Portanto, em comparação com o $ SCOPE, $ Rootscope, ele economiza muito tempo para encontrar modelos.
No entanto, se você deseja garantir a sincronização de todos os dados do modelo na página, ainda precisará chamar $ RootsCope, por isso é melhor pensar sobre quais dados devem ser sincronizados antes de escrever o código.
TIP3: ligue para Ng-repetir o mínimo possível
O NG-REPEAT criará muitos ouvintes por padrão; portanto, quando o volume de dados for grande, isso consome desempenho da página. Eu acho que o NG-repetir só é necessário quando você precisa atualizar a lista de dados com frequência; caso contrário, seria um desperdício colocar tantos ouvintes lá. No momento, você pode usar o próprio serviço de interpolado $ da NG para analisar um trecho de código, semelhante a um mecanismo de modelo estático, que se baseia principalmente no principal serviço de análise do NG $ parse, e depois atribui diretamente esses trechos de código após preencher os dados a um modelo único.
Tip4: tente escrever sintaxe nativa no comando
Embora o NG forneça muitas instruções, como NG-Show e Ng-Hide, sua função é exibir ou ocultar um trecho de código com base no verdadeiro e falso do modelo. Embora possa implementar rapidamente os requisitos de negócios, essas instruções ainda adicionarão ouvintes por padrão. Se esses trechos de código existem em uma grande instrução, a melhor maneira é escrever métodos JQ semelhantes, como .show () e .hide () no link de instrução para controlá -lo, que pode salvar o número de ouvintes e instruções de evento semelhantes. Eles podem realmente vincular eventos em instruções periféricas usando o addEventListener. De qualquer forma, antes de escrever código, é melhor pensar em como minimizar o número de ouvintes, para que o desempenho da página possa ser melhorado de forma abrangente.
TIP5: Use filtros o mínimo possível na página
Ao adicionar filtros por trás do modelo na página, isso fará com que o modelo atual seja executado duas vezes em $ Digest, causando desperdício de desempenho desnecessário. A primeira vez é quando a tarefa de detecção de observadores $$ muda; A segunda vez ocorre quando o valor do modelo é modificado; portanto, tente usar a sintaxe do filtro quando embutido o mínimo possível. Como o seguinte afeta muito o desempenho da página
Recomenda -se usar o serviço $ filtro para chamar uma função de filtro em segundo plano, que pode melhorar significativamente o desempenho da página. O código é o seguinte
A cópia do código é a seguinte:
$ filtro ('filtro') (matriz, expressão, comparador);
Resumir
O exposto acima são algumas dicas para melhorar o desempenho dos projetos NG. Embora Ng seja muito poderoso, o código irregular também destruirá seu desempenho. Portanto, é melhor pensar em onde os ouvintes não são necessários antes de escrever código.