Para proporcionar una experiencia de usuario fresca y única, muchos sitios web usan JavaScript para mejorar el diseño, verificar formularios, verificar los navegadores, así como las solicitudes de Ajax, las operaciones de cookies, etc., para lograr efectos dinámicos sin actualización. Sin embargo, si desea representar una gran cantidad de contenido en el navegador, si no se procesa correctamente, el rendimiento del sitio web caerá bruscamente. Por lo tanto, es necesario comprender cómo mejorar la eficiencia de ejecución de JavaScript.
Funciones de JavaScript
En JavaScript, las funciones se precompilan antes de su uso. Aunque a veces se pueden usar cadenas en lugar de funciones, este código JavaScript se volverá a aparecer cada vez que se ejecute, afectando el rendimiento.
1. Eval de ejemplo
La copia del código es la siguiente:
eval ('output = (input * input)');
// Se recomienda cambiar a:
eval (nueva función () {output = (input * input)});
2. Ejemplo de setTimeout
La copia del código es la siguiente:
setTimeOut ("alerta (1)", 1000);
// Se recomienda cambiar a:
setTimeOut (function () {alerta (1)}, 1000);
Use funciones en lugar de cadenas como parámetros para garantizar que el código en el nuevo método pueda ser optimizado por el compilador JavaScript.
Alcance de JavaScript
Cada alcance en la cadena de alcance de JavaScript contiene varias variables. Es importante comprender la cadena de alcance para que pueda aprovecharla.
La copia del código es la siguiente:
var localvar = "global"; // variables globales
función test () {
var localVar = "local"; // variables locales
// variables locales
alerta (localVar);
// variables globales
alerta (this.localvar);
// Encuentra el documento y no se pueden encontrar la variable local, así que busque la variable global
var pageName = document.getElementById ("PageName");
}
El uso de variables locales es mucho más rápido que usar variables globales, porque cuanto más lejos en la cadena de alcance, más lento será el análisis. La siguiente figura muestra la estructura de la cadena de alcance:
Si hay declaraciones con captura de try en el código, la cadena de alcance será más complicada, como se muestra en la figura a continuación:
Cadenas JavaScript
Una función en JavaScript que tiene un impacto en el rendimiento es la concatenación de cadenas. En general, el signo + se usa para implementar el empalme de cadenas. Sin embargo, los primeros navegadores no optimizaron tales métodos de conexión, lo que resultó en la creación continua y la destrucción de cadenas que redujeron seriamente la eficiencia de ejecución de JavaScript.
La copia del código es la siguiente:
var txt = "hola" + "" + "mundo";
Se recomienda cambiar a:
La copia del código es la siguiente:
var o = [];
o.push ("hola");
o.push ("");
o.push ("mundo");
var txt = O.Join ();
Simplemente encapsulemos:
La copia del código es la siguiente:
función stringbuffer (str) {
var arr = [];
arr.push (str || "");
this.append = function (str) {
arr.push (str);
devolver esto;
};
this.ToString = function () {
regresar arr.Join ("");
};
};
Entonces llame a esto:
La copia del código es la siguiente:
var txt = new StringBuffer ();
txt.append ("hola");
txt.append ("");
txt.append ("mundo");
alerta (txt.ToString ());
Operación DOM JavaScript
El modelo de objeto de documento HTML (DOM) define una forma estándar de acceder y manipular documentos HTML. Representa un documento HTML como un árbol de nodo que contiene elementos, atributos y contenido de texto. Al usar HTML DOM, JavaScript puede acceder y manipular todos los nodos en un documento HTML.
Repintado
Cada vez que un objeto DOM modificado en una página involucra a DOM Redrawing, el navegador volverá a renderizar la página. Por lo tanto, reducir el número de modificaciones de los objetos DOM puede mejorar efectivamente el rendimiento de JavaScript.
La copia del código es la siguiente:
para (var i = 0; i <1000; i ++) {
var elmt = document.createElement ('P');
elmt.innerhtml = i;
document.body.appendChild (Elmt);
}
Se recomienda cambiar a:
La copia del código es la siguiente:
var html = [];
para (var i = 0; i <1000; i ++) {
html.push ('<p>' + i + '</p>');
}
document.body.innerhtml = html.join ('');
Acceso DOM
Se puede acceder a cada nodo en el documento HTML a través del DOM. Cada vez que llame a GetElementById (), GetElementsBytagName () y otros métodos, el nodo se volverá a terminar y se accedirá. Por lo tanto, el caché Los nodos DOM encontrados también pueden mejorar el rendimiento de JavaScript.
La copia del código es la siguiente:
document.getElementById ("P2"). style.color = "Blue";
document.getElementById ("p2"). style.fontfamily = "arial";
document.getElementById ("p2"). style.fontSize = "más grande";
Se recomienda cambiar a:
La copia del código es la siguiente:
var elmt = document.getElementById ("P2");
elmt.style.color = "azul";
elmt.style.fontfamily = "Arial";
elmt.style.fontSize = "más grande";
DOM Traversal
Los elementos infantiles transversales de DOM generalmente leen el siguiente elemento infantil por bucle de índice. En los primeros navegadores, este método de lectura es muy eficiente en la ejecución. El uso del método de NextSiBling puede mejorar la eficiencia del recorrido de DOM por JS.
La copia del código es la siguiente:
var html = [];
var x = document.getElementsBytagName ("P"); // Todos los nodos
para (var i = 0; i <x.length; i ++) {
//hacer
}
Se recomienda cambiar a:
La copia del código es la siguiente:
var html = [];
var x = document.getElementById ("div"); // El nodo superior
var nodo = x.firstchild;
while (nodo! = null) {
//hacer
nodo = node.nextsibling;
}
Versión de memoria de JavaScript
En las aplicaciones web, a medida que aumenta el número de objetos DOM, el consumo de memoria se volverá cada vez más grande. Por lo tanto, las referencias a los objetos deben liberarse a tiempo para que el navegador pueda reciclar esta memoria.
Liberar la memoria ocupada por el DOM
La copia del código es la siguiente:
document.getElementById ("prueba"). innerhtml = "";
Establecer el interno del elemento DOM en una cadena vacía puede liberar la memoria ocupada por sus elementos hijos.
Libere el objeto JavaScript
La copia del código es la siguiente:
//Objeto:
obj = nulo
// Propiedades del objeto:
Eliminar obj.property
// elementos de matriz:
arr.splice (0,3); // Eliminar los primeros 3 elementos