Este artículo describe técnicas comunes para JavaScript para mejorar el rendimiento. Compártelo para su referencia, como sigue:
1. Presta atención al alcance
A medida que aumenta el número de ámbitos en la cadena de alcance, el tiempo para acceder a variables fuera del alcance actual también aumenta. Acceder a las variables globales siempre es más lento que acceder a variables locales porque necesita atravesar la cadena de alcance.
1). Siempre es correcto evitar búsquedas globales para almacenar objetos globales que se utilizarán varias veces en una función como variables locales.
2). Evite que con la declaración con crea su propio alcance, aumentando así la longitud de la cadena de alcance en la que se ejecuta el código.
2. Elija el método correcto
Parte del problema de rendimiento está relacionado con el algoritmo o el método utilizado para resolver el problema.
1). Evite las búsquedas innecesarias de atributos
En informática, la complejidad de un algoritmo está representada por el símbolo O. El algoritmo más simple y más rápido es el valor constante, a saber o (1). Después de eso, el algoritmo se vuelve cada vez más complejo y tarda más en ejecutarse. Los tipos comunes de algoritmos de JavaScript son:
Constante: no importa cuántos valores haya, el tiempo de ejecución es constante. En general, representa un valor simple y el valor almacenado en una variable.
LOGARITHM: El tiempo de ejecución total está relacionado con el número de valores, pero no es necesario obtener cada valor para completar el algoritmo. Por ejemplo: búsqueda binaria
Lineal: el tiempo de ejecución total está directamente relacionado con el número de valores. Por ejemplo: iterar a través de todos los elementos en una matriz
CUADRADO: El tiempo de ejecución total está relacionado con el número de valores, y cada valor debe obtenerse al menos n veces. Por ejemplo: insertar clasificaciones
Cubo: el tiempo de ejecución total está relacionado con el número de valores, y cada valor debe obtener al menos cuadrados de n.
El uso de variables y matrices es más eficiente que acceder a propiedades en objetos. La búsqueda de cualquier atributo en un objeto lleva más tiempo que acceder a una variable o matriz, porque se debe buscar una propiedad con ese nombre en la cadena prototipo.
En términos generales, mientras se pueda reducir la complejidad del algoritmo, debe minimizarse tanto como sea posible. Use tantas variables locales como sea posible para reemplazar las búsquedas de propiedades con búsquedas de valor. Además, si puede acceder a él con posiciones de matriz digitalizadas o usar atributos con nombre (como objetos nodelistas), use la posición de la matriz.
2). Optimizar el bucle
a. La iteración de deterioro en muchos casos, los iteradores que comienzan desde el valor máximo y perjudican continuamente en el bucle son más eficientes.
b. Condiciones de terminación simplificadas Dado que cada proceso de ciclo calcula la condición de terminación, debe garantizarse lo más rápido posible.
do. Cuerpo de bucle simplificado El cuerpo de bucle es el más realizado, así que asegúrese de que esté optimizado en la medida máxima. Asegúrese de que no haya cálculos intensivos que se puedan eliminar fácilmente del bucle.
d. Los bucles más utilizados para y mientras en los bucles posteriores a la prueba son bucles previos a la prueba. Los bucles posteriores a la prueba, como el funcionamiento, pueden evitar la terminación inicial del cálculo de la condición y, por lo tanto, más rápido.
3). Expanda el bucle cuando se determina el número de bucles, eliminar el bucle y usar múltiples llamadas de función a menudo es más rápido. Por ejemplo, el famoso dispositivo Duff
4). Evite la doble explicación
Cuando JavaScript Code quiere analizar JavaScript, habrá una penalización de doble interpretación. El siguiente ejemplo:
eval ("alerta ('¡Hola mundo!')"); // Algunos códigos evalúan valoresFijado:
alerta ('hola mundo'); var sayshi = nueva función ("alerta ('¡Hola mundo!')");Fijado:
var sayshi = function () {alert ("Hellow World! ');}; setTimeout ("alerta ('Hellow World!')", 500);Fijado:
setTimeout (function) ({alerta ('Hellow World!');}, 500);5). Otros métodos
Los métodos nativos son más rápidos: siempre que sea posible, use métodos nativos en lugar de reescribir uno en JavaScript usted mismo. Los métodos nativos se escriben en lenguajes compilados como C/C ++, por lo que son mucho más rápidos que JavaScript. Lo más fácil de olvidar en JavaScript son las complejas operaciones matemáticas que se pueden encontrar en objetos matemáticos; Estos métodos son mucho más rápidos que cualquier otro método escrito en JavaScript, como Sine y Cosine.
Las declaraciones de interruptor son más rápidas: si hay una declaración IF -ELSE compleja que se puede convertir en una sola instrucción Switch, puede obtener un código más rápido. También puede organizar las declaraciones de casos en el orden más probable para el orden menos probable para optimizar aún más las declaraciones del conmutador.
Los operadores de bits son más rápidos: cuando se realizan operaciones matemáticas, las operaciones de bits son más rápidas que cualquier operación booleana o aritmética. La conversión selectiva de las operaciones de bit puede mejorar en gran medida el rendimiento de los cálculos complejos. Por ejemplo, módulo, lógica y lógica de suma, puede considerar usar operaciones de bit para reemplazarlas.
3. Minimizar el número de declaraciones
1). Declaraciones variables múltiples
como:
// 4 declaraciones --- es un desperdicio de VAR count = 5; var color = "azul"; valores var = [1,2,3]; var ahora = new Date ();
mejoramiento:
var count = 5, color = "azul", valores = [1,2,3], noiw = new Date ();
Esta optimización es muy fácil de hacer en la mayoría de los casos y es mucho más rápida que una sola declaración variable por separado.
2). Insertar valor iterativo
como:
var name = valores [i]; i ++;
mejoramiento:
var name = valores [i ++];
3). Use matrices y literales de objetos
como:
valores var = new Array (); ---> val valores = [];
var obj = nuevo objeto (); ---> var obj = {};
4. Optimizar la interacción DOM
1). Minimizar las actualizaciones en el sitio
Una vez que necesite acceder a DOM Part es parte de la página que se ha mostrado, está haciendo una actualización en vivo. La razón por la que se llama una actualización en vivo es que la página debe actualizarse de inmediato (en el sitio) a la pantalla del usuario. Ya sea que esté insertando un solo carácter o eliminar todo el clip, hay una penalización de rendimiento porque el navegador tiene que recalcular innumerables tamaños para actualizar.
ejemplo:
var list = document.getElementById ("myList"); for (var i = 0; i <10; i ++) {var item = document.createElement ("li"); list.appendChild (elemento); item.appendChild (document.createTextNode ("item"+i));}Esto agrega 10 proyectos, y esta operación requiere un total de 20 actualizaciones en el sitio. Lo siguiente es para mejorar el siguiente método para crear fragmentos de documentos:
var list = document.getElementById ("myList"); var fragment = document.createDocumentFragment (); for (var i = 0; i <10; i ++) {fragment.appendChild (item); item.appendChild (document.createTextNode ("item"+i));} list.appendChlid (fragmento);En este ejemplo, solo hay una actualización en vivo, que ocurre después de que se crean todos los proyectos. El fragmento del documento se utiliza como marcador de posición temporal para colocar el proyecto recién creado. Luego use AppendChild () para agregar todos los elementos a la lista. Recuerde que cuando AppendChild () se aprueba en el fragmento del documento, solo los nodos infantiles en el fragmento se agregan al objetivo, y el fragmento en sí no se agregará.
Una vez que necesite actualizar el DOM, considere usar la fragmentación del documento para construir la estructura DOM y luego agregarla al documento existente.
2). Usar innerhtml
Hay dos formas de crear nodos DOM en una página: utilizando métodos DOM como createElement (), appendChild () y usando innerhtml para pequeños cambios DOM, ambos métodos son similares en eficiencia. Para grandes cambios DOM, el uso de InnerHTML es mucho más rápido que usar métodos DOM estándar para crear la misma estructura DOM. Del mismo modo, usar InnerHTML en un momento es mucho más rápido que usar InnerHTML varias veces.
3). Use el proxy de eventos (simple, omitido)
4). Presta atención a Nodelist
Minimizar el número de accesos a Nodelist puede mejorar en gran medida el rendimiento del script.
El objeto Nodelist se devuelve cuando ocurre lo siguiente:
a. Se realiza la llamada a GetElementsBytagName ()
b. Obtenga la propiedad de los nodos infantiles del elemento
do. Obtenga los atributos atributos del elemento
d. Acceso colecciones especiales, como document.forms, document.Images, etc.
Es necesario comprender que al usar objetos nodelist, el uso razonable mejorará en gran medida la velocidad de ejecución del código.
La función de la función introducida anteriormente también es un aspecto muy importante. Especialmente cuando múltiples bucles son muy consumen el rendimiento, este método es muy útil.
PS: Para la compresión de JavaScript, reducir el tamaño del código también es una forma efectiva de mejorar el rendimiento de JavaScript. Aquí hay dos herramientas de compresión muy prácticas:
Herramientas de compresión/formato/cifrado de JavaScript:
http://tools.vevb.com/code/jscompress
JSMIN en línea JS Herramienta de compresión:
http://tools.vevb.com/code/jsmincompress
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of JavaScript Algoritmos y técnicas de recorrido ", y" Resumen del uso de operaciones matemáticas de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.