JavaScript é uma linguagem muito flexível. Podemos escrever vários estilos de código como gostamos. Diferentes estilos de código inevitavelmente levarão a diferenças na eficiência da execução. Durante o processo de desenvolvimento, somos expostos a muitos métodos para melhorar o desempenho do código. Vamos resolver os problemas comuns e fáceis de evitar.
Eficiência de execução do Javascript
A cadeia de escopo, o fechamento, a herança do protótipo, a avaliação e outros recursos do JavaScript fornece várias funções mágicas, além de trazer vários problemas de eficiência. Se você o usar descuidadamente, levará a uma execução ineficiente.
1. Importação global
Usaremos algumas variáveis globais (janela, documento, variáveis globais personalizadas etc.) durante o processo de codificação. Qualquer pessoa que conheça a cadeia de escopo JavaScript sabe que o acesso a variáveis globais em um escopo local exige atravessar toda a camada da cadeia de escopo por camada até o escopo de nível superior, e a eficiência de acesso das variáveis locais será mais rápida e maior. Portanto, ao usar alguns objetos globais em alta frequência no escopo local, ele pode ser importado para o escopo local, por exemplo:
A cópia do código é a seguinte:
// 1. Passe para o módulo como um parâmetro
(função (janela, $) {
var xxx = window.xxx;
$ ("#xxx1"). xxx ();
$ ("#xxx2"). xxx ();
}) (janela, jQuery);
// 2. Armazenando variáveis locais
função(){
var doc = document;
var global = window.global;
}
2. Problemas de avaliação e avaliação de classe
Todos sabemos que a avaliação pode usar uma string como código JS para executá -lo e processá -lo. Diz -se que o código executado usando avaliação é mais de 100 vezes mais lento que o código que não usa Eval (não testei a eficiência específica, e aqueles que estão interessados podem testá -lo)
O código JavaScript executará operações semelhantes de "pré -compilação" antes da execução: primeiro, ele criará um objeto ativo no ambiente de execução atual e definirá as variáveis declaradas com VAR como propriedades do objeto ativo, mas, neste momento, as atribuições dessas variáveis são indefinidas e as funções definidas na função também são adicionadas como propriedades das propriedades das propriedades das propriedades. No entanto, se você usar "avaliar", o código em "avaliar" (na verdade uma string) não poderá pré-identificar seu contexto, não poderá ser analisado e otimizado com antecedência, ou seja, operações pré-compiladas não podem ser executadas. Portanto, seu desempenho será bastante reduzido
De fato, as pessoas raramente usam avaliar agora. O que eu quero falar aqui é um cenário de dois tipos de avaliação (nova função {}, setTimeout, setInterver)
A cópia do código é a seguinte:
setTimTout ("Alert (1)", 1000);
setInterver ("alerta (1)", 1000);
(nova função ("alerta (1)")) ();
Os tipos acima de eficiência de execução de código serão relativamente baixos, por isso é recomendável passar diretamente métodos ou referências anônimas ao método Settimeout.
3. Após o término do fechamento, a variável que não é mais referenciada será liberada.
A cópia do código é a seguinte:
var f = (function () {
var a = {nome: "var3"};
var b = ["var1", "var2"];
var c = document.getElementByTagName ("li");
// **** Outras variáveis
// *** Algumas operações
var res = function () {
Alerta (A.Name);
}
retornar res;
}) ()
O valor de retorno da variável f no código acima é um método de retorno em um fechamento composto por uma função de execução imediata. Essa variável mantém referências a todas as variáveis (A, B, C, etc.) neste fechamento. Portanto, essas duas variáveis sempre residirão no espaço da memória, especialmente a referência ao elemento DOM consumirá muita memória. Usamos apenas o valor da variável A em res. Portanto, podemos libertar outras variáveis antes do retorno do fechamento.
A cópia do código é a seguinte:
var f = (function () {
var a = {nome: "var3"};
var b = ["var1", "var2"];
var c = document.getElementByTagName ("li");
// **** Outras variáveis
// *** Algumas operações
// Libere as variáveis que não são mais usadas antes do retorno do fechamento
b = c = nulo;
var res = function () {
Alerta (A.Name);
}
retornar res;
}) ()
A eficiência do JS operando DOM
Durante o processo de desenvolvimento da Web, o gargalo da eficiência da execução do front-end é frequentemente nas operações da DOM. As operações DOM são uma coisa muito consumida por desempenho. Como podemos tentar salvar o desempenho durante as operações da DOM?
1. Reduza o refluxo
O que é reflexão?
Quando as propriedades do elemento DOM mudam (como a cor), o navegador notificará a renderização para redefinir o elemento correspondente. Este processo é chamado de repintura.
Se a alteração envolver o layout do elemento (como a largura), o navegador descarta os atributos originais, recalcula e passa o resultado para a renderização para redelinear os elementos da página. Este processo é chamado de refluxo.
Como reduzir o refluxo
Primeiro, exclua o elemento do documento e, depois de concluir a modificação, coloque o elemento de volta à sua posição original (quando um grande número de operações de refluxo é realizado em um determinado elemento e seus elementos filhos, os efeitos dos métodos 1 e 2 serão mais óbvios)
Defina a exibição do elemento como "nenhum" e, depois de concluir a modificação, modifique a tela no valor original
Defina a aula ao modificar os atributos de vários estilos em vez de modificar os atributos de estilo várias vezes (recomendado por certos alunos)
Use o DocumentFragment ao adicionar grandes quantidades de elementos à página
Por exemplo
A cópia do código é a seguinte:
for (var i = 0; i <100: i ++) {
var criança = docuemnt.createElement ("li");
Child.innerhtml = "Child";
document.getElementById ("Parent"). AppendChild (Child);
}
Quando o código requer acesso múltiplo às informações de estado de um elemento, podemos armazená -lo temporariamente em uma variável quando o estado permanecer inalterado, o que pode evitar a sobrecarga da memória causada por acesso múltiplo ao DOM. Um exemplo típico é:
Ao procurar elementos DOM, tente evitar atravessar elementos da página em grandes áreas, tente usar seletores precisos ou especifique um contexto para restringir o intervalo de pesquisa, tomando jQuery como exemplo
Use menos seletores de correspondência difusa: por exemplo $ ("[nome*= '_ fix']"), use mais seletores compostos, como ID e estreitando gradualmente o escopo $ ("li.active"), etc.
Especifique o contexto: por exemplo $ ("#pai .class"), $ (". Classe", $ el) e assim por diante
4. Use a delegação de eventos
Cenário de uso: uma lista com um grande número de registros. Cada registro precisa clicar em eventos. Algumas funções são implementadas após clicar no mouse. Nossa prática usual é ligar para ouvir eventos para cada registro. Essa prática levará a um grande número de ouvintes de eventos na página, o que é relativamente ineficiente.
Princípio básico: todos sabemos que os eventos borbulharão na especificação DOM, ou seja, os eventos de qualquer elemento borbulharão para o topo passo a passo, de acordo com a estrutura da árvore dom. O Objeto de Evento também fornece Event.Target (SRCELEMENT SOB IE) para apontar para a fonte do evento, para que possamos encontrar o elemento mais original que desencadeia o evento, mesmo se ouvirmos o evento no elemento pai. Este é o princípio básico do delegado. Sem mais delongas, o exemplo acima
Com base no princípio do monitoramento de eventos introduzidos acima, vamos reescrever.
Obviamente, não precisamos julgar a fonte do evento sempre, podemos abstraí -lo e entregá -lo à classe de ferramentas para concluí -lo. O método delegate () em jQuery implementa esta função
A sintaxe é como $ (seletor) .Delegate (ChildSelector, evento, dados, função), por exemplo:
A cópia do código é a seguinte:
$ ("div"). delegado ("botão", "clique", function () {
$ ("P"). SlideToggle ();
});
Descrição do parâmetro (citado no W3School)
Descrição do parâmetro
ChildSelector é necessário. Especifica que um ou mais elementos filhos do manipulador de eventos a serem anexados.
Evento é necessário. Especifica um ou mais eventos anexados ao elemento. Separe vários valores de evento por espaços. Deve ser um evento válido.
Os dados são opcionais. Especifica os dados adicionais passados para a função.
função necessária. Especifica a função que é executada quando ocorre um evento.
Dicas: Outra vantagem da delegação de eventos é que mesmo os eventos acionados nos elementos adicionados dinamicamente após a ligação do evento pode ser ouvida, para que você não precise vincular eventos a cada vez que adicionar dinamicamente um elemento à página.