Entre las sugerencias (i) de JavaScript para mejorar el rendimiento del sitio web, se presentan varias sugerencias para mejorar el rendimiento del sitio web de las solicitudes HTTP a la representación de la página. Este artículo es un resumen desde la perspectiva del rendimiento de JavaScript después de aprender otro libro de Steve Sounders, "Guía avanzada para la construcción del sitio web de alto rendimiento".
El rendimiento de JavaScript es la clave para implementar aplicaciones web de alto rendimiento
--Steve Sounders
1. Utilice la cadena de alcance JS
cadena de alcance
Al ejecutar una pieza de código JavaScript (código global o función), el motor JavaScript creará un alcance para ello, también conocido como contexto de ejecución. Después de cargar la página, primero se creará un alcance global, y luego se ejecutará cada función, se establecerá un alcance correspondiente, formando así una cadena de alcance. Cada alcance tiene una cadena de alcance correspondiente, la cabeza de la cadena es el alcance global, y la cola de la cadena es el alcance de la función actual.
El propósito de la cadena de alcance es analizar identificadores. Cuando se crea la función (no se ejecuta), esto, los argumentos, los parámetros nombrados y todas las variables locales en la función se agregarán al alcance actual. Cuando JavaScript necesita encontrar la variable X (este proceso se llama resolución variable), primero buscará si hay un atributo X desde el final de la cadena en la cadena de alcance, es decir, el alcance actual. Si no se encuentra, continúe buscando a lo largo de la cadena de alcance hasta que la cabeza de la cadena, es decir, la cadena de alcance global, y no se encuentra la variable, se cree que no hay una variable X en la cadena de alcance de este código, y se lanza una excepción de error de referencia (referenceError).
Gestionar la profundidad de la cadena de alcance es una forma simple de mejorar el rendimiento con solo una pequeña cantidad de trabajo. Deberíamos evitar velocidades de ejecución lentas debido al crecimiento involuntario de la cadena de alcance.
Use variables locales (cadenas de alcance cortos tanto como sea posible)
Si entendemos el concepto de cadena de alcance, entonces debemos tener claro que las variables de análisis del motor JavaScript están relacionadas con la profundidad de la cadena de alcance. Obviamente, las variables locales están al final de la cadena y tienen la velocidad de acceso más rápida. Por lo tanto, una buena experiencia es: cuando se usa cualquier variable no local más de una vez, utilice las variables locales para almacenarlas, por ejemplo:
función cambiable () {document.getElementById ('myDiv'). classname = 'cambiado'; document.getElementById ('myDiv'). style.height = 150;}Aquí, el elemento MyDiv Dom se hace referencia dos veces. Para una referencia más rápida, debemos almacenarlo con una variable local. Los beneficios de hacer esto no solo acortan la cadena de alcance, sino que también evitan consultas duplicadas de elementos DOM:
función cambiable () {var myDivStyle = document.getElementById ('myDiv'). style; myDiv.className = 300; mydiv.style.height = 150;}Evite usar con (no cultivar cadenas de alcance)
En general, durante la ejecución del código, la cadena de alcance de la función es fija, pero puede aumentar temporalmente la cadena de alcance de la función. con se usa para mostrar las propiedades del objeto como variables locales para facilitar el acceso, por ejemplo:
Var user = {name: 'VicFeel', Age: '23 '}; función showUser () {var local = 0; con (usuario) {console.log ("name" + name); console.log ("edad" + edad); console.log (local);}} showUser ();En este ejemplo, con un alcance temporal se agrega al final de la cadena de alcance Showuser, que almacena todas las propiedades del objeto de usuario, es decir, la cadena de alcance con el código aumenta. En este código, las variables locales como el cambio local desde el primer objeto al final de la cadena hasta la segunda, lo que naturalmente ralentiza el acceso de los identificadores. Hasta que termine con la declaración, la cadena de alcance reanuda el crecimiento. Debido a este defecto de con, debemos tratar de evitar usar la palabra clave.
2 Control de flujo más razonable
Al igual que otros lenguajes de programación, JavaScript tiene algunas declaraciones de control de flujo (bucles, condiciones, etc.), y el uso de declaraciones apropiadas en cada enlace puede mejorar en gran medida la velocidad de ejecución del script.
Juicio de condición rápida
Cuando se trata de juicio condicional, la primera forma 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 if (value == 4) {return result4;} else if (value == 5) {return dutur5;} if (value == 6) resultado7;}El principal problema con este método de usar si para el juicio condicional es que el nivel es demasiado profundo. Cuando quiero valor = 7, el tiempo consume mucho más tiempo que el valor = 0, lo que pierde enormemente el rendimiento y es una legibilidad deficiente.
Una mejor manera de emitir juicios con Switch.
SWITHC (valor) {Caso 0: retorno result0; caso 1: retorno result1; caso 2: retorno resultado 2; caso 3: retorno result3; caso 4: retorno resultado 4; caso 5: retorno result5; caso 6: retorno result6; predeterminado Resultado 7;}Esto no solo mejora la legibilidad, sino que también requiere un tiempo de consulta más rápido que si. Pero si es más rápido que el interruptor si solo una o dos condiciones
En JavaScript, hay otra forma de consultar condicionales. El ejemplo anterior era devolver diferentes valores de acuerdo con el valor, que simplemente puede usar matrices para implementar la consulta de mapeo de tablas hash.
// Defina los resultados de la matriz var = [resultado0, resultado1, resultado2, resultado3, resultado4, resultado5, resultado6, resultado7]; // Consulta Resultado de retorno de resultados [valor];
Este método de matriz es más efectivo cuando el rango de consulta es grande, ya que no tiene que detectar límites superiores e inferiores, y solo necesita completar el valor de índice para consultar. Su limitación es que la condición corresponde a un valor único en lugar de una serie de operaciones. Por lo tanto, debemos combinar de manera integral la situación real, elegir el método de juicio apropiado de las condiciones y maximizar el rendimiento.
Ciclo rápido
Hay 4 métodos de bucle en JavaScript para bucle, bucle do-while, mientras que el bucle y el bucle for-in. Aquí hay un método de reciclaje muy utilizado:
valores var = [1,2,3,4,5]; para (var i = 0; i <valores.length; i ++) {proceso (valores [i]);}Podemos ver que la optimización más obvia de este código es valores.length. Cada bucle debo ser comparado con la longitud de los valores. La consulta de los atributos es más lento que las variables locales. Si el número de bucles es más grande, cuanto más lento será. Por lo tanto, se puede optimizar así:
valores var = [1,2,3,4,5]; var longitud = valores.length; // longitud de matriz de almacenamiento variable local para (var i = 0; i <longitud; i ++) {proceso (valores [i]);}Este código también puede continuar optimizando, disminuyendo la variable de bucle a 0 en lugar de agregar a la longitud total.
valores var = [1,2,3,4,5]; var longitud = valores.length; for (var i = longitud; i-;) {// disminución a 0process (valores [i]);}Aquí, el final del bucle se transforma para compararse con 0, por lo que la velocidad de cada bucle es más rápida. Dependiendo de la complejidad del bucle, este simple cambio puede ahorrar aproximadamente el 50% del tiempo que antes.