JavaScript es un lenguaje muy flexible. Podemos escribir varios estilos de código como nos gusta. Los diferentes estilos de código inevitablemente conducirán a diferencias en la eficiencia de la ejecución. Durante el proceso de desarrollo, estamos expuestos a muchos métodos para mejorar el rendimiento del código. Ordenemos los problemas comunes y fáciles de evitar.
La propia eficiencia de ejecución de JavaScript
La cadena de alcance, el cierre, la herencia prototipo, Eval y otras características en JavaScript proporcionan varias funciones mágicas al tiempo que traen diversos problemas de eficiencia. Si lo usa descuidadamente, conducirá a una ejecución ineficiente.
1. Importación global
Utilizaremos algunas variables globales (ventana, documento, variables globales personalizadas, etc.) durante el proceso de codificación. Cualquiera que conozca la cadena de alcance de JavaScript sabe que acceder a variables globales en un alcance local requiere atravesar toda la capa de alcance por capa hasta el alcance de nivel superior, y la eficiencia de acceso de las variables locales será más rápida y mayor. Por lo tanto, al usar algunos objetos globales a alta frecuencia en el alcance local, se puede importar al alcance local, por ejemplo:
La copia del código es la siguiente:
// 1. Pasarlo al módulo como parámetro
(función (ventana, $) {
var xxx = window.xxx;
$ ("#xxx1"). xxx ();
$ ("#xxx2"). xxx ();
}) (ventana, jQuery);
// 2. Almacenamiento a variables locales
función(){
var doc = documento;
var global = window.global;
}
2. Ev.
Todos sabemos que Ev puede usar una cadena como código JS para ejecutarla y procesarla. Se dice que el código ejecutado con EVAL es más de 100 veces más lento que el código que no usa Eval (no he probado la eficiencia específica, y aquellos que están interesados pueden probarlo)
El código JavaScript realizará operaciones similares de "precompilación" antes de la ejecución: primero, creará un objeto activo en el entorno de ejecución actual y establecerá las variables declaradas con var como propiedades del objeto activo, pero en este momento las asignaciones de estas variables están indefinidas, y las funciones definidas en la función también se agregan como propiedades del objeto activo, y sus valores son exactamente la definición de la función. Sin embargo, si usa "eval", el código en "eval" (en realidad una cadena) no puede preididificar su contexto, no se puede analizar y optimizar de antemano, es decir, las operaciones precompiladas no se pueden realizar. Por lo tanto, su rendimiento se reducirá considerablemente
De hecho, las personas rara vez usan Evs ahora. De lo que quiero hablar aquí es un escenario de dos tipos de evaluación (nueva función {}, setTimeout, setinterver)
La copia del código es la siguiente:
setmTout ("alerta (1)", 1000);
setInterver ("alerta (1)", 1000);
(nueva función ("alerta (1)")) ();
Los tipos anteriores de eficiencia de ejecución del código serán relativamente bajas, por lo que se recomienda aprobar directamente métodos anónimos o referencias al método SetTimout.
3. Después de que se termine el cierre, se lanzará la variable a la que ya no se hace referencia.
La copia del código es la siguiente:
var f = (function () {
var a = {nombre: "var3"};
var b = ["var1", "var2"];
var c = document.getElementBytagName ("li");
// **** Otras variables
// *** Algunas operaciones
var res = function () {
alerta (a.name);
}
regresar res;
}) ()
El valor de retorno de la variable F en el código anterior es un método RES devuelto en un cierre compuesto por una función de ejecución inmediata. Esta variable conserva las referencias a todas las variables (A, B, C, etc.) en este cierre. Por lo tanto, estas dos variables siempre residirán en el espacio de memoria, especialmente la referencia al elemento DOM consumirá mucha memoria. Solo usamos el valor de la variable A en res. Por lo tanto, podemos liberar otras variables antes de que regrese el cierre.
La copia del código es la siguiente:
var f = (function () {
var a = {nombre: "var3"};
var b = ["var1", "var2"];
var c = document.getElementBytagName ("li");
// **** Otras variables
// *** Algunas operaciones
// libera las variables que ya no se usan antes de que regrese el cierre
b = c = nulo;
var res = function () {
alerta (a.name);
}
regresar res;
}) ()
La eficiencia de JS operando DOM
Durante el proceso de desarrollo web, el cuello de botella de eficiencia de ejecución frontal a menudo se encuentra en las operaciones DOM. Las operaciones DOM son algo que consume mucho rendimiento. ¿Cómo podemos tratar de ahorrar rendimiento durante las operaciones DOM?
1. Reduce el reflujo
¿Qué es el reflujo?
Cuando las propiedades del elemento DOM cambian (como el color), el navegador notificará al renderizado para redefinir el elemento correspondiente. Este proceso se llama repintado.
Si el cambio implica el diseño del elemento (como el ancho), el navegador descarta los atributos originales, recalcula y pasa el resultado al renderizado para enojar los elementos de la página. Este proceso se llama reflujo.
Cómo reducir el reflujo
Primero elimine el elemento del documento, y después de completar la modificación, luego vuelva a colocar el elemento en su posición original (cuando se realiza una gran cantidad de operaciones de reflujo en un determinado elemento y los elementos infantiles, los efectos de los métodos 1 y 2 serán más obvios)
Establezca la visualización del elemento en "ninguno", y después de completar la modificación, modifique la pantalla al valor original
Defina la clase de clase al modificar los atributos de estilo múltiple en lugar de modificar los atributos de estilo varias veces (recomendado por ciertos estudiantes)
Use DocumentFragment al agregar grandes cantidades de elementos a la página
Por ejemplo
La copia del código es la siguiente:
para (var i = 0; i <100: i ++) {
var child = docuemnt.createElement ("li");
child.innerhtml = "niño";
document.getElementById ("Parent"). AppendChild (niño);
}
Cuando el código requiere acceso múltiple a la información de estado de un elemento, podemos almacenarlo temporalmente en una variable cuando el estado permanece sin cambios, lo que puede evitar la sobrecarga de memoria causada por el acceso múltiple al DOM. Un ejemplo típico es:
Al buscar elementos DOM, intente evitar atravesar elementos de página en grandes áreas, intente usar selectores precisos o especifique un contexto para reducir el rango de búsqueda, tomando jQuery como ejemplo
Utilice menos selectores de coincidencia de combate: por ejemplo $ ("[Nombre*= '_ Fix']"), más use más selectores compuestos, como ID y reduce gradualmente el alcance $ ("Li.Active"), etc.
Especifique el contexto: por ejemplo $ ("#parent .class"), $ (". Clase", $ el) etc.
4. Use la delegación de eventos
Escenario de uso: una lista con una gran cantidad de registros. Cada registro debe estar obligado a hacer clic en eventos. Algunas funciones se implementan después de hacer clic en el mouse. Nuestra práctica habitual es unir los eventos de escucha para cada disco. Esta práctica conducirá a una gran cantidad de oyentes de eventos en la página, que es relativamente ineficiente.
Principio básico: todos sabemos que los eventos burbujearán en la especificación DOM, es decir, los eventos de cualquier elemento burbujearán hacia arriba paso a paso de acuerdo con la estructura del árbol DOM. Event Object también proporciona eventos. Este es el principio básico del delegado. Sin más preámbulos, el ejemplo anterior
Basado en el principio de monitoreo de eventos introducidos anteriormente, reescribamos.
Por supuesto, no tenemos que juzgar la fuente del evento cada vez, podemos abstraerla y entregarla a la clase de herramientas para completarla. El método delegado () en jQuery implementa esta función
La sintaxis es como $ (selector) .delegate (childselector, evento, datos, función), por ejemplo:
La copia del código es la siguiente:
$ ("div"). delegate ("botón", "hacer clic", function () {
$ ("P"). Slidetoggle ();
});
Descripción del parámetro (citado de W3School)
Descripción del parámetro
Se requiere un bildselector. Especifica que uno o más elementos infantiles del controlador de eventos se adjuntarán.
Se requiere evento. Especifica uno o más eventos adjuntos al elemento. Separan múltiples valores de eventos por espacios. Debe ser un evento válido.
Los datos son opcionales. Especifica los datos adicionales pasados a la función.
función requerida. Especifica la función que se ejecuta cuando ocurre un evento.
Consejos: Otra ventaja de la delegación de eventos es que incluso los eventos activados en elementos agregados dinámicamente después de la unión del evento se pueden escuchar, para que no tenga que unir eventos a cada vez que agregue dinámicamente un elemento a la página.