Entre as sugestões (i) do JavaScript sobre a melhoria do desempenho do site, várias sugestões são apresentadas para melhorar o desempenho do site das solicitações HTTP para renderização de páginas. Este artigo é um resumo da perspectiva do desempenho do JavaScript depois de aprender outro livro de Steve Sounders, "Guia avançado de construção de sites de alto desempenho".
O desempenho do JavaScript é a chave para implementar aplicativos da Web de alto desempenho
-Sonders-steve
1. Utilize a cadeia de escopo JS
Cadeia de escopo
Ao executar uma parte do código JavaScript (código ou função global), o mecanismo JavaScript criará um escopo para ele, também conhecido como contexto de execução. Depois que a página for carregada, um escopo global será criado primeiro e, em seguida, cada função será executada, um escopo correspondente será estabelecido, formando assim uma cadeia de escopo. Cada escopo possui uma cadeia de escopo correspondente, a cabeça da cadeia é o escopo global e a cauda da cadeia é o escopo da função atual.
O objetivo da cadeia de escopo é analisar identificadores. Quando a função é criada (não executada), isso, argumentos, parâmetros nomeados e todas as variáveis locais na função serão adicionadas ao escopo atual. Quando o JavaScript precisa encontrar a variável x (esse processo é chamado de resolução variável), ele primeiro procurará se existe um atributo x do final da cadeia na cadeia de escopo, ou seja, o escopo atual. Se não for encontrado, continue pesquisando ao longo da corrente de escopo até a cabeça da corrente, ou seja, a cadeia de escopo global e a variável não é encontrada, acredita -se que não exista uma variável X na cadeia de escopo desse código e uma exceção de erro de referência (referenceError) é atribuída.
Gerenciar a profundidade da cadeia de escopo é uma maneira simples de melhorar o desempenho com apenas uma pequena quantidade de trabalho. Devemos evitar lentas velocidades de execução devido ao crescimento não intencional da cadeia de escopo.
Use variáveis locais (cadeias de escopo curtas o máximo possível)
Se entendermos o conceito de cadeia de escopo, devemos deixar claro que as variáveis de análise do motor JavaScript estão relacionadas à profundidade da cadeia de escopo. Obviamente, as variáveis locais estão no final da corrente e têm a velocidade de acesso mais rápida. Portanto, uma boa experiência é: quando qualquer variável não local for usada mais de uma vez, use variáveis locais para armazená-las, por exemplo:
função alterações alterações () {document.getElementById ('mydiv'). classname = 'alterações'; document.getElementById ('mydiv'). style.height = 150;}Aqui, o elemento Mydiv Dom é referenciado duas vezes. Para uma referência mais rápida, devemos armazená -la com uma variável local. Os benefícios de fazer isso não apenas diminuem a cadeia de escopo, mas também evitam consultas duplicadas dos elementos DOM:
function alterações () {var myDivstyle = document.getElementById ('mydiv'). style; mydiv.classname = 300; mydiv.style.height = 150;}Evite usar com (não cultive cadeias de escopo)
Geralmente, durante a execução do código, a cadeia de escopo da função é fixa, mas pode aumentar temporariamente a cadeia de escopo da função. com é usado para exibir as propriedades do objeto como variáveis locais para facilitar o acesso, por exemplo:
var user = {name: 'vicfeel', idade: '23 '}; function showUser () {var local = 0; com (usuário) {console.log ("name" + name); console.log ("idade" + idade); console.log (local);}} showUser ();Neste exemplo, com um escopo temporário é adicionado ao final da cadeia de escopo ShowUser, que armazena todas as propriedades do objeto do usuário, ou seja, a cadeia de escopo com o código é aumentada. Neste código, variáveis locais como alteração local do primeiro objeto no final da cadeia para a segunda, que naturalmente diminuem o acesso de identificadores. Até que a declaração com o término, a cadeia de escopo retoma o crescimento. Por causa dessa falha, devemos tentar evitar usar a palavra -chave.
2 mais controle de fluxo razoável
Como outras linguagens de programação, o JavaScript possui algumas declarações de controle de fluxo (loops, condições, etc.) e, o uso de instruções apropriadas em cada link, pode melhorar bastante a velocidade de execução do script.
Julgamento rápido da condição
Quando se trata de julgamento condicional, a primeira maneira de evitar:
if (value == 0) {return result0;} else if (value == 1) {return result1;} else if (value == 2) {return result2;} else if (value == 3) {return result3;} else (value (value == 4) {return result4;} else (value == 5) {returl; resultado7;}O principal problema com esse método de uso se para julgamento condicional é que o nível é muito profundo. Quando eu quero valor = 7, o tempo consome muito mais tempo que o valor = 0, o que perde muito o desempenho e é baixa legibilidade.
Uma maneira melhor de fazer julgamentos com o Switch.
swithc (value) {case 0: return result0; caso 1: retorno resultado1; caso 2: retorno resultado2; caso 3: return resultado3; caso 4: return Result4; caso 5: retorno resultado5; caso 6: retorno resultado6; inadimplência: resultação de retorno7;}Isso não apenas melhora a legibilidade, mas também requer tempo de consulta mais rápido do que se. Mas se for mais rápido que a mudança se apenas uma ou duas condições
No JavaScript, há outra maneira de consultar condicionais. O exemplo anterior era retornar valores diferentes de acordo com o valor, que por acaso é capaz de usar matrizes para implementar o mapeamento da consulta de tabelas de hash.
// Defina a matriz var Results = [Result0, resultado1, Result2, Result3, Result4, Result5, Result6, Result7]; // Resultados de Consulta Resultados Resultados dos Resultados [Valor];
Esse método de matriz é mais eficaz quando a faixa de consulta é grande, porque não precisa detectar limites superior e inferior e só precisa preencher o valor do índice para consultar. Sua limitação é que a condição corresponde a um único valor em vez de a uma série de operações. Portanto, devemos combinar de forma abrangente a situação real, escolher o método de julgamento apropriado de condições e maximizar o desempenho.
Ciclo rápido
Existem 4 métodos de loop no JavaScript para loop, loop do Do-while, enquanto loop e loop for in. Aqui está um método de reciclagem muito usado:
var valores = [1,2,3,4,5]; para (var i = 0; i <valores.length; i ++) {process (valores [i]);}Podemos ver que a otimização mais óbvia desse código é valores. Cada loop devo ser comparado com o comprimento dos valores. Os atributos de consulta são mais demorados do que as variáveis locais. Se o número de loops for maior, mais demorado será. Portanto, pode ser otimizado assim:
var valores = [1,2,3,4,5]; var comprimento = valores.
Esse código também pode continuar a otimizar, diminuindo a variável de loop para 0 em vez de adicionar ao comprimento total.
var valores = [1,2,3,4,5]; var comprimento = valores.
Aqui, o final do loop é transformado para comparar com 0, portanto a velocidade de cada loop é mais rápida. Dependendo da complexidade do loop, essa mudança simples pode economizar cerca de 50% do tempo do que antes.