Cómo mejorar el rendimiento de javascript code_javascript tips
1. Optimizar la interacción DOM
DOM está estrechamente relacionado con nuestra página. Cuando el navegador representa la página, también representa los elementos DOM analizados. La manipulación e interacción de DOM consumen mucho tiempo porque a menudo requieren volver a representar la página completa o una parte de ella. Además, las operaciones aparentemente pequeñas también pueden llevar mucho tiempo porque el DOM tiene mucha información que procesar, por lo que debemos optimizar las operaciones relacionadas con el DOM tanto como sea posible para acelerar el navegador para representar la página. Para obtener más información sobre por qué ciertas operaciones DOM afectan el rendimiento de la página, consulte algunos de mis artículos sobre los principios del navegador:
Bien, para optimizar las operaciones DOM, hay algunas formas principales en que podemos lograrlo:
1.1 Minimizar las actualizaciones en tiempo real
¿Qué es la actualización en tiempo real de DOM? Las páginas que deben actualizarse inmediatamente se muestran con parte de su contenido ya mostrado en la sección DOM. Sin embargo, cada cambio (ya sea insertar un solo carácter en una posición o un fragmento completo) tiene un impacto en el rendimiento, ya que el navegador necesita recalcular innumerables dimensiones para realizar la actualización (para más información, lea: ). Por lo tanto, cuantas más actualizaciones en tiempo real se realicen, más tiempo tardará en ejecutarse el código y, a la inversa, más rápido se ejecutará, como se muestra a continuación:
Este código agrega 10 elementos a la lista mylist, cada uno agregado El elemento requiere 2 actualizaciones en tiempo real: agregar un elemento y agregar un nodo de texto, por lo que esta operación requiere 20 actualizaciones en tiempo real, cada una de las cuales reducirá el rendimiento. Se puede ver que este tipo de código se ejecuta con relativa lentitud.
La solución es utilizar fragmentos de documentos para cambiar elementos DOM indirectamente:
Un código como este solo necesita realizar una actualización en vivo. Recuerde que al pasar un fragmento de documento a appendChild(), solo los elementos secundarios del fragmento de documento se agregarán al elemento de destino, no el fragmento en sí.
Ahora deberías comprender cuánto lamentas al navegador cuando usa bucles para agregar, eliminar y modificar directamente nodos DOM `(∩_∩)′.
1.2 Usando InnerHTML
Además de crear elementos DOM usando la combinación createElement() y appendChild() en el código anterior, también puedes crear elementos DOM asignando un valor a InnerHTML. . Para cambios DOM más pequeños, ambos métodos son aproximadamente igualmente eficientes, pero para cambios en una gran cantidad de nodos DOM, ¡el último es mucho más rápido que el primero! ¿Por qué?
Porque cuando asignamos un valor a InnerHTML, se creará un analizador HTML detrás de escena y luego usará llamadas DOM internas para crear la estructura DOM en lugar de usar llamadas DOM basadas en Javascript.
Reescribe el ejemplo anterior usando InnerHTML:
¡Este método también realiza solo una actualización en tiempo real y tiene mejor rendimiento que el método anterior! Aunque habrá cierta penalización en el rendimiento en términos de concatenación de cadenas.
1.3 Uso de servidores proxy/delegados de eventos
Los controladores de eventos brindan interactividad a las aplicaciones web, por lo que muchos desarrolladores agregan una gran cantidad de controladores indiscriminadamente a la página, y un problema es que el número La cantidad de controladores de eventos en una página está directamente relacionada con el rendimiento general de la página.
¿Por qué sucede esto?
En primer lugar, el controlador de eventos corresponde al menos a una función, y cada función en JS es un objeto que ocupa memoria. Cuanto más objetos haya en la memoria, peor será el rendimiento.
En segundo lugar, debemos especificar todos los controladores de eventos con anticipación, lo que generará más accesos al DOM, lo que retrasará el tiempo de preparación interactiva de toda la página y la respuesta de la página a las operaciones del usuario también será relativamente lenta.
Por lo tanto, reducir el número de controladores de eventos también hará que nuestra página sea más fluida. ¡Usar la delegación de eventos es imprescindible!
El principio de la delegación de eventos es la difusión de eventos, es decir, especificar un controlador de eventos para gestionar todos los eventos de un tipo de operación específico. Por ejemplo, un evento de clic se expande hasta el nivel del documento, lo que significa que no tenemos que agregar un evento para cada elemento, simplemente agregamos controladores de eventos para elementos de nivel superior y luego usamos las propiedades o métodos del evento. objeto para determinar el elemento en el que se está haciendo clic actualmente y responde en consecuencia. No entraré en detalles aquí. Los principiantes pueden comprobar el conocimiento del evento por sí mismos.
2. El alcance es muy importante
Hablando de alcance, es fácil para todos pensar en la cadena de alcance. Sabemos que necesitamos encontrar una variable y el entorno de ejecución aquí. es Necesitamos buscar hacia arriba a lo largo del alcance de esta variable. Hay muchas variables en esta cadena de alcance, por lo que tenemos que recorrerlo lleva tiempo, y cuanto más atrás busquemos, más tiempo tomará. Al reducir este tiempo, puede encontrar más tiempo necesario para encontrar el alcance. Si pudiéramos reducir este tiempo, ¿no podríamos mejorar la eficiencia de la ejecución del código?
Inteligente, está bien, veamos cómo reducir este tiempo:
2.1 Evite búsquedas globales
Este es uno de los aspectos más importantes de la optimización del rendimiento. Como dije anteriormente, cuanto más arriba esté la búsqueda, más larga será la búsqueda, es decir, ¡hay más formas de encontrar variables y funciones globales que formas de encontrar variables y funciones locales! Mire el código:
¡Este código es normal! Solía hacer esto todo el tiempo. Pero podemos mirar con atención. Hay tres referencias al documento de variable global en este código. Si hay muchas imágenes en nuestra página, el documento se ejecutará cientos de veces en el bucle for y cada vez debe estar en él. la cadena de alcance. Buscar, ¿dónde se ha ido el tiempo? Yo no…. ¡detener!
Podemos guardar una referencia al documento creando una variable local en la función, de modo que cuando hagamos referencia al documento en cualquier parte de la función, no tengamos que ir a la variable global para encontrarlo. Esto mejorará el rendimiento del código, eche un vistazo al código:
Entonces, si vamos a usar variables globales con frecuencia en funciones, ¡manténgalas en variables locales!
2.2 Evite el uso de la declaración with
La declaración with expande el alcance y la búsqueda de variables también lleva mucho tiempo. Por lo general, no la usamos, por lo que no la expandiré. en ello. La solución sigue siendo la misma que en el ejemplo anterior: ¡guarde las variables globales en variables locales!
3. Optimización de bucles
Los bucles son un fenómeno común en la programación y se pueden ver en todas partes en js. Un bucle ejecuta repetidamente el mismo fragmento de código y el tiempo de ejecución continúa aumentando. Por lo tanto, optimizar el código en el cuerpo del bucle también puede reducir en gran medida el tiempo de ejecución. ¿Cómo optimizar? Cuatro métodos.
3.1 Reducir el valor de iteración
Generalmente escribimos iteradores (condiciones de bucle) así (var i = 0;i
3.2 Simplificar las condiciones de terminación
Dado que cada bucle tiene que calcular la condición de terminación, se debe garantizar que se ejecute en tantos bloques como sea posible. Esto es principalmente para evitar buscar otros elementos DOM y sus atributos. Simplifique el cuerpo del bucle.
Evite realizar muchas operaciones intensivas dentro de los bucles por las mismas razones anteriores.
Esta es esencialmente la misma optimización que la anterior: 1.1 Minimizar las actualizaciones en vivo. Esto es lo mismo. optimización. Puedes volver atrás y echar un vistazo.
4. Optimización del algoritmo básico
En las computadoras, la complejidad de un algoritmo está representada por O.
A continuación se muestran algunos tipos comunes de algoritmos en javascript:
O(1) : Constante, el tiempo de ejecución es constante sin importar cuántos valores haya, como valores simples y valores almacenados en variables.
O(log n): logarítmico, el tiempo total de ejecución está relacionado con el valor, pero no es necesario obtener todos los valores, por ejemplo: búsqueda binaria
O(n ): tipo lineal, el tiempo total de ejecución está directamente relacionado con el valor numérico, por ejemplo: transversal
O(n): tipo lineal, el tiempo total de ejecución está directamente relacionado con el valor numérico, por ejemplo : recorrido
O(n* n): cuadrado, el tiempo total de ejecución está relacionado con el número, cada valor debe obtenerse al menos N veces, por ejemplo: clasificación por inserción
Está bien, con Con el conocimiento anterior, podemos realizar algunas optimizaciones de algoritmos en javascript. Mire el código:
Este código realiza 4 búsquedas de valores constantes: número 5, valor de variable, número 10, suma de variables y la complejidad algorítmica de este código es O(1). Otro ejemplo:
Acceder a elementos de una matriz en javascript también es una operación O(1), tan eficiente como una simple búsqueda de variables. Nuevamente:
Cabe señalar que acceder a las propiedades de los objetos es menos eficiente que acceder a matrices y variables. Esto se debe a que se trata de una operación O(n). Debe buscar la propiedad en la cadena de prototipos del objeto, lo que llevará más tiempo.
Bien, después de leer esto, ¿sientes que hay luz al final del túnel? De hecho, lo que dijimos antes sobre guardar propiedades globales de uso común en variables locales se basa en este principio. Acceder a una propiedad global es O(n) y acceder a una variable es O(1), así que ¡dígame alto y claro cuál es el mejor buscador!
5. Minimizar el número de declaraciones
Las optimizaciones mencionadas anteriormente están casi todas relacionadas con la racionalización y optimización de declaraciones. Sí, creo que la calidad y la cantidad del código son los criterios para juzgar. actuación. Ya he hablado de algunas optimizaciones relacionadas con la calidad del código, así que hablaré aquí de las optimizaciones de la cantidad de código.
5.1 Simplificando la declaración de variables
5.2 Usando arrays y literales de objetos
6. Otros
Estoy muy cansado de escribir esto, si es que hay. Si hay algún problema, corríjame. Hay muchas otras optimizaciones que continuaremos presentando en el próximo artículo.