Este artigo descreve técnicas comuns para JavaScript para melhorar o desempenho. Compartilhe -o para sua referência, como segue:
1. Preste atenção ao escopo
À medida que o número de escopos na cadeia do escopo aumenta, o tempo para acessar variáveis fora do escopo atual também aumenta. O acesso às variáveis globais é sempre mais lento do que acessar variáveis locais, pois você precisa atravessar a cadeia de escopo.
1). É sempre correto evitar pesquisas globais para armazenar objetos globais que serão usados várias vezes em uma função como variáveis locais.
2). Evite isso com a declaração cria seu próprio escopo, aumentando assim o comprimento da cadeia de escopo na qual o código é executado.
2. Escolha o método certo
Parte do problema de desempenho está relacionada ao algoritmo ou método usado para resolver o problema.
1). Evite pesquisas de atributo desnecessárias
Na ciência da computação, a complexidade de um algoritmo é representada pelo símbolo O. O algoritmo mais simples e mais rápido é o valor constante, a saber O (1). Depois disso, o algoritmo se torna cada vez mais complexo e leva mais tempo para executar. Os tipos de algoritmo JavaScript comum são:
Constante: não importa quantos valores existam, o tempo de execução é constante. Geralmente, representa um valor simples e o valor armazenado em uma variável.
LOGARITHM: O tempo total de execução está relacionado ao número de valores, mas não é necessário obter cada valor para concluir o algoritmo. Por exemplo: pesquisa binária
Linear: o tempo total de execução está diretamente relacionado ao número de valores. Por exemplo: iterar através de todos os elementos em uma matriz
Quadrado: o tempo total de execução está relacionado ao número de valores e cada valor deve ser obtido pelo menos n vezes. Por exemplo: Inserir classificar
Cubo: O tempo total de execução está relacionado ao número de valores e cada valor deve obter pelo menos quadrados de n.
O uso de variáveis e matrizes é mais eficiente do que acessar propriedades em objetos. A busca por qualquer atributo em um objeto leva mais tempo do que acessar uma variável ou matriz, porque uma propriedade com esse nome deve ser pesquisada na cadeia de protótipo.
De um modo geral, desde que a complexidade do algoritmo possa ser reduzida, ele deve ser minimizado o máximo possível. Use o maior número possível de variáveis locais para substituir as pesquisas de propriedades por pesquisas de valor. Além disso, se você puder acessá -lo com posições de matriz digitalizada ou usar atributos nomeados (como objetos nodelistas), use a posição da matriz.
2). Otimize o loop
um. A iteração por redução ao valor recuperável, em muitos casos, os iteradores que começam com o valor máximo e prejudicam continuamente o loop são mais eficientes.
b. Condições de terminação simplificadas Como cada processo de ciclo calcula a condição de terminação, ele deve ser garantido o mais rápido possível.
c. Corpo de loop simplificado O corpo do loop é o mais executado; portanto, verifique se ele é otimizado na extensão máxima. Verifique se não há cálculos intensivos que possam ser facilmente removidos do loop.
d. Os mais comumente usados para e enquanto os loops nos loops pós-teste são loops de pré-teste. Loops pós-teste como Do-while podem evitar o término inicial do cálculo da condição e, portanto, mais rápido.
3). Expanda o loop quando o número de loops for determinado, eliminando o loop e usando várias chamadas de função geralmente é mais rápido. Por exemplo, o famoso dispositivo Duff
4). Evite explicação dupla
Quando o código JavaScript deseja analisar o JavaScript, haverá uma penalidade de dupla interpretação. O exemplo a seguir:
Eval ("Alert ('Hello World!')"); // Alguns códigos avaliam valoresFixo:
Alerta ('Hello World'); var dizhi = nova função ("alert ('hello world!')");Fixo:
var dizhi = function () {alert ("Hellow World! ');}; setTimeout ("Alert ('Hellow World!')", 500);Fixo:
setTimeout (function) ({alert ('Hellow World!');}, 500);5). Outros métodos
Os métodos nativos são mais rápidos - sempre que possível, use métodos nativos em vez de reescrever um em JavaScript. Os métodos nativos são escritos em linguagens compiladas, como C/C ++, por isso são muito mais rápidas que o JavaScript. A coisa mais facilmente esquecida no JavaScript são as operações matemáticas complexas que podem ser encontradas em objetos de matemática; Esses métodos são muito mais rápidos do que qualquer outro método escrito em JavaScript, como seno e cosseno.
As instruções do comutador são mais rápidas - se houver uma instrução IF -ELSE complexa que possa ser convertida em uma única instrução Switch, você poderá obter um código mais rápido. Você também pode organizar as declarações do caso na ordem mais provável, com a ordem menos provável de otimizar ainda mais as instruções de comutador.
Os operadores de bits são mais rápidos - quando são realizadas operações matemáticas, as operações de bits são mais rápidas do que qualquer operações booleanas ou aritméticas. A conversão seletiva de operações de bits pode melhorar bastante o desempenho de cálculos complexos. Por exemplo, Modulo, lógica e lógica da soma, você pode considerar o uso de operações de bits para substituí -las.
3. Minimize o número de declarações
1). Declarações variáveis múltiplas
como:
// 4 declarações --- é um desperdício de VAR count = 5; var color = "azul"; var valores = [1,2,3]; var agora = new Date ();
Otimização:
var count = 5, color = "azul", valores = [1,2,3], noiw = new Date ();
Essa otimização é muito fácil de fazer na maioria dos casos e é muito mais rápida que uma única declaração variável separadamente.
2). Insira o valor iterativo
como:
var name = valores [i]; i ++;
Otimização:
Var nome = valores [i ++];
3). Use matrizes e literais de objeto
como:
var valores = new Array (); ---> var valores = [];
var obj = new Object (); ---> var obj = {};
4. Otimize a interação DOM
1). Minimize as atualizações no local
Depois que você precisa acessar a parte DOM faz parte da página exibida, você está fazendo uma atualização ao vivo. O motivo pelo qual é chamado de atualização ao vivo é que a página precisa ser atualizada imediatamente (no local) para a exibição do usuário. Seja inserindo um único caractere ou removendo o clipe inteiro, há uma penalidade de desempenho porque o navegador precisa recalcular inúmeros tamanhos para atualizar.
exemplo:
var lista = document.getElementById ("mylist"); for (var i = 0; i <10; i ++) {var item = document.createElement ("li"); list.appendChild (item); item.appendChild (document.createTextNode ("item"+i));}Isso adiciona 10 projetos, e esta operação requer um total de 20 atualizações no local. O seguinte é melhorar o seguinte método de criação de fragmentos de documentos:
var lista = document.getElementById ("myList"); var fragment = document.createCumentFragment (); for (var i = 0; i <10; i ++) {fragment.appendChild (item); item.appendChild (document.createTextNode ("item"+i));} list.appendchlid (fragmento);Neste exemplo, existe apenas uma atualização ao vivo, que acontece depois que todos os projetos são criados. O fragmento de documento é usado como um espaço reservado temporário para colocar o projeto recém -criado. Em seguida, use AppendChild () para adicionar todos os itens à lista. Lembre -se de que quando o AppendChild () é passado no fragmento de documentos, apenas os nós filhos no fragmento são adicionados ao alvo e o próprio fragmento não será adicionado.
Depois de precisar atualizar o DOM, considere usar a fragmentação do documento para criar a estrutura DOM e adicione -a ao documento existente.
2). Use INNERHTML
Existem duas maneiras de criar nós DOM em uma página: usando métodos DOM como CreateElement (), AppendChild () e usando o InnerHTML para pequenas alterações de DOM, ambos os métodos são semelhantes em eficiência. Para grandes alterações de DOM, o uso do InnerHTML é muito mais rápido do que o uso de métodos DOM padrão para criar a mesma estrutura DOM. Da mesma forma, o uso de innerhtml de uma só vez é muito mais rápido do que usar o InnerHTML várias vezes.
3). Use Proxy de Evento (simples, omitido)
4). Preste atenção à lista de nodelas
Minimizar o número de acessos à lista de nodelas pode melhorar bastante o desempenho do script.
O objeto Nodelist é retornado quando ocorre o seguinte:
um. Ligue para getElementsByTagName () é feito
b. Obtenha a propriedade Childnodes do elemento
c. Obtenha os atributos atributos do elemento
d. Coleções especiais acessadas, como document.forms, document.images, etc.
É necessário entender que, ao usar objetos Nodelist, o uso razoável melhorará bastante a velocidade de execução do código.
O estrangulamento da função introduzido anteriormente também é um aspecto muito importante. Especialmente quando vários loops são muito consumidos por desempenho, esse método é muito útil.
PS: Para compactação de JavaScript, reduzir o tamanho do código também é uma maneira eficaz de melhorar o desempenho do JavaScript. Aqui estão duas ferramentas de compressão muito práticas:
Ferramentas de compactação/formatação/criptografia javascript:
http://tools.vevb.com/code/jscompress
Ferramenta de compactação JSMIN Online JS:
http://tools.vevb.com/code/jsmincompress
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Javascript Algoritmos e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.