Para fornecer uma experiência nova e única do usuário, muitos sites usam JavaScript para melhorar o design, verificar formulários, verificar navegadores, bem como solicitações de AJAX, operações de cookies etc. para obter efeitos dinâmicos sem atualização. No entanto, se você deseja renderizar uma grande quantidade de conteúdo no navegador, se não for processado corretamente, o desempenho do site cairá acentuadamente. Portanto, é necessário entender como melhorar a eficiência da execução do JavaScript.
Funções JavaScript
No JavaScript, as funções são pré -compiladas antes do uso. Embora às vezes as strings possam ser usadas em vez de funções, esse código JavaScript será reequilibrado toda vez que for executado, afetando o desempenho.
1. Exemplo de avaliação
A cópia do código é a seguinte:
Eval ('output = (entrada * input)');
// é recomendável mudar para:
Eval (new function () {output = (input * input)});
2. Exemplo do setTimeout
A cópia do código é a seguinte:
setTimeout ("Alert (1)", 1000);
// é recomendável mudar para:
setTimeout (function () {alert (1)}, 1000);
Use funções em vez de strings como parâmetros para garantir que o código no novo método possa ser otimizado pelo compilador JavaScript.
Escopo de JavaScript
Cada escopo na cadeia de escopo JavaScript contém várias variáveis. É importante entender a corrente do escopo para que você possa tirar proveito dela.
A cópia do código é a seguinte:
var localvar = "global"; // variáveis globais
function test () {
var localvar = "local"; // variáveis locais
// variáveis locais
alerta (localvar);
// variáveis globais
alerta (this.localvar);
// Encontre o documento e a variável local não podem ser encontrados; portanto, procure a variável global
var pagename = document.getElementById ("pagename");
}
O uso de variáveis locais é muito mais rápido do que usar variáveis globais, porque quanto mais longe na cadeia de escopo, mais lenta a análise. A figura a seguir mostra a estrutura da corrente do escopo:
Se houver com ou tentativas de tipo, a cadeia de escopo será mais complicada, conforme mostrado na figura abaixo:
Strings JavaScript
Uma função no JavaScript que tem um impacto de muito desempenho é a concatenação de string. Geralmente, o sinal + é usado para implementar a emenda de strings. No entanto, os primeiros navegadores não otimizaram esses métodos de conexão, resultando na criação e destruição contínua de cordas que reduziram seriamente a eficiência da execução de JavaScript.
A cópia do código é a seguinte:
var txt = "Hello" + "" + "World";
Recomenda -se mudar para:
A cópia do código é a seguinte:
var o = [];
o.push ("hello");
o.push ("");
o.push ("mundo");
var txt = O.Join ();
Vamos simplesmente encapsular:
A cópia do código é a seguinte:
função stringbuffer (str) {
var arr = [];
Arr.push (str || "");
this.append = function (str) {
Arr.push (str);
devolver isso;
};
this.toString = function () {
retornar arr.join ("");
};
};
Então chame isso:
A cópia do código é a seguinte:
var txt = new StringBuffer ();
txt.append ("Hello");
txt.append ("");
txt.append ("mundo");
alerta (txt.toString ());
Javascript Dom Operação
O Modelo de Objeto do Documento HTML (DOM) define uma maneira padrão de acessar e manipular documentos HTML. Representa um documento HTML como uma árvore de nós que contém elementos, atributos e conteúdo de texto. Ao usar o HTML DOM, o JavaScript pode acessar e manipular todos os nós em um documento HTML.
Dom repintar
Toda vez que um objeto DOM modificado para uma página envolve redesenhas de DOM, o navegador renderá a página novamente. Portanto, reduzir o número de modificações dos objetos DOM pode melhorar efetivamente o desempenho do JavaScript.
A cópia do código é a seguinte:
for (var i = 0; i <1000; i ++) {
var elmt = document.createElement ('p');
elmt.innerhtml = i;
document.body.appendChild (ELMT);
}
Recomenda -se mudar para:
A cópia do código é a seguinte:
var html = [];
for (var i = 0; i <1000; i ++) {
html.push ('<p>' + i + '</p>');
}
document.body.innerhtml = html.join ('');
DOM Access
Cada nó no documento HTML pode ser acessado através do DOM. Toda vez que você chama getElementById (), getElementsByTagName () e outros métodos, o nó será reenviado e acessado. Portanto, cache os nós DOM encontrados também podem melhorar o desempenho do JavaScript.
A cópia do código é a seguinte:
document.getElementById ("p2"). style.color = "azul";
document.getElementById ("p2"). style.fontfamily = "arial";
document.getElementById ("p2"). style.fontsize = "maior";
Recomenda -se mudar para:
A cópia do código é a seguinte:
var elmt = document.getElementById ("p2");
elmt.style.color = "azul";
elmt.style.fontfamily = "Arial";
elmt.style.fontsize = "maior";
Dom Traversal
Os elementos filhos do DOM Traversal geralmente leem o próximo elemento filho por loop de índices. Nos primeiros navegadores, esse método de leitura é muito eficiente na execução. O uso do método NextSibling pode melhorar a eficiência da travessia do DOM pelo JS.
A cópia do código é a seguinte:
var html = [];
var x = document.getElementsByTagName ("p"); // Todos os nós
for (var i = 0; i <x.length; i ++) {
//pendência
}
Recomenda -se mudar para:
A cópia do código é a seguinte:
var html = [];
var x = document.getElementById ("div"); // o nó superior
var node = x.firstChild;
while (node! = null) {
//pendência
node = node.nextsibling;
}
Liberação de memória JavaScript
Nos aplicativos da Web, à medida que o número de objetos DOM aumenta, o consumo de memória se tornará cada vez maior. Portanto, as referências a objetos devem ser liberadas no tempo para que o navegador possa reciclar essa memória.
Livre a memória ocupada pelo DOM
A cópia do código é a seguinte:
document.getElementById ("teste"). innerhtml = "";
Definir o InnerHTML do elemento DOM como uma string vazia pode libertar a memória ocupada por seus elementos filhos.
Libere o objeto JavaScript
A cópia do código é a seguinte:
//Objeto:
obj = nulo
// Propriedades do objeto:
Exclua obj.property
// elementos de matriz:
Arr.splice (0,3); // Exclua os 3 primeiros elementos