12 consejos para mejorar el rendimiento de la aplicación JavaScript

El rendimiento es uno de los problemas más importantes que enfrentan los desarrolladores web o las aplicaciones web. Nadie estará contento con una aplicación, o una página que se ha estado cargando durante años, que se bloquea por una carga excesiva. Los usuarios del sitio web no están listos para esperar demasiado por sus descargas o para que sus páginas funcionen. Según Kissmetrics , el 47% de los visitantes esperan que un sitio web se cargue en menos de 2 segundos. El 40% de los visitantes abandonarán el sitio si tarda más de 3 segundos en cargarlo.



El autor del material, cuya traducción publicamos hoy, dice que, teniendo en cuenta las cifras anteriores, queda claro que el rendimiento es algo que los desarrolladores web siempre deben recordar. Aquí hay 12 consejos para mejorar el rendimiento de los proyectos JS.

1. Utilizar mecanismos de almacenamiento en caché del navegador

Hay dos formas principales de almacenar en caché los datos mediante navegadores. El primero es el uso de la API JavaScript JavaScript de caché, que es manejada por los trabajadores del servicio. El segundo es un caché HTTP normal.

Las secuencias de comandos a menudo se usan para organizar el acceso a ciertos objetos. Si almacena una referencia a un objeto al que a menudo necesita acceder en una variable, y también si usa esta variable en operaciones repetidas que requieren acceso al objeto, puede mejorar el rendimiento del código.

2. Optimice el código para aquellos entornos en los que se ejecutará

Para evaluar adecuadamente las mejoras realizadas al programa, se recomienda formar un conjunto de entornos en los que se puedan realizar mediciones.

En la práctica, no podrá realizar estudios de rendimiento de código, por ejemplo, en todas las versiones existentes de motores JS, ni optimizar el código para todos los entornos en los que puede ejecutarse. Pero debe tenerse en cuenta que probar el código en cualquier entorno tampoco es la mejor práctica. Tal enfoque puede dar resultados distorsionados. Por lo tanto, es importante crear un conjunto de entornos en los que lo más probable es que el código se ejecute, y probar proyectos en estos entornos.

3. Deshágase del código JS no utilizado

Al eliminar el código no utilizado del proyecto, no solo se mejorará el tiempo de carga del navegador para los scripts, sino también el tiempo requerido para que los navegadores analicen y compilen el código. Para deshacerse del código no utilizado, debe prestar atención a las características del proyecto. Por lo tanto, si encuentra alguna funcionalidad con la que los usuarios no trabajan, considere eliminarla del proyecto y, al mismo tiempo, considere el código JS asociado con él. Como resultado, el sitio se cargará más rápido, será más rápido prepararse para trabajar en el navegador. Esto tendrá un efecto beneficioso en las impresiones que los usuarios experimentarán con el sitio. Al analizar un proyecto, tenga en cuenta que, por ejemplo, una biblioteca determinada incluida en su composición puede incluirse por error. Es muy posible que no se use en él. Vale la pena deshacerse de él. Lo mismo se aplica al uso de ciertas dependencias que implementan lo que ya está implementado en los navegadores modernos. Como resultado, cambiar a las funciones estándar del navegador duplicadas por esta dependencia ayudará a eliminar el código innecesario.

4. Ahorra memoria

Vale la pena esforzarse por garantizar que los proyectos web usen solo esa memoria, sin la cual no pueden hacerlo. El hecho es que un desarrollador no puede saber de antemano cuánta memoria puede acceder su aplicación en un dispositivo determinado. Si la aplicación utiliza injustificadamente grandes cantidades de memoria, esto crea una mayor carga en los mecanismos de administración de memoria del motor JS del navegador. En particular, esto se aplica al recolector de basura. Las llamadas frecuentes de recolección de basura ralentizan los programas. Esto afecta negativamente la usabilidad del proyecto.

5. Utilice mecanismos de carga diferidos para scripts menores

Los usuarios quieren que las páginas web se carguen lo más rápido posible. Pero es poco probable que se necesite todo el código JS del proyecto para la visualización inicial de la página. Si un usuario necesita realizar alguna acción para activar un determinado código (por ejemplo, hacer clic en un elemento o ir a alguna pestaña de la aplicación), la carga de este código se puede posponer después de completarlo después de la carga inicial de la página y los recursos más importantes.

Con este enfoque, puede evitar que el navegador cargue y compile una gran cantidad de código JS al principio, es decir, evite ralentizar el resultado de la página debido a la necesidad de realizar estas operaciones. Una vez completada la descarga de todo lo más importante, puede comenzar a descargar código adicional. Como resultado, cuando el usuario necesita este código, ya estará disponible para él. Según el modelo RAIL , Google recomienda ejecutar sesiones de script de carga diferida de aproximadamente 50 ms de duración. Con este enfoque, las operaciones de carga de código no afectarán la interacción del usuario con la página.

6. Evitar pérdidas de memoria

Si se produce una pérdida de memoria en su aplicación, esto provocará que la página cargada solicite cada vez más memoria del navegador. Como resultado, el consumo de memoria de esta página puede alcanzar un nivel tal que afectará negativamente el rendimiento de todo el sistema. Usted mismo probablemente enfrentó un problema similar (y probablemente no le gustó). Es posible que la página en la que hubo una pérdida de memoria contuviera algún tipo de visor de imágenes, como un control deslizante o un "carrusel".

Con las Herramientas para desarrolladores de Chrome, puede analizar su sitio en busca de pérdidas de memoria. Esto se hace examinando los indicadores utilizando la pestaña Rendimiento. Por lo general, las pérdidas de memoria provienen de fragmentos DOM eliminados de la página, pero vinculados a algunas variables. Esto evita que el recolector de basura borre la memoria ocupada por los datos en fragmentos DOM innecesarios.

7. Si necesita hacer algo de computación pesada, use trabajadores web

A partir de los materiales del recurso MDN, puede descubrir que los trabajadores web pueden ejecutar código en un subproceso en segundo plano que es independiente del subproceso principal de la aplicación web. La ventaja de este enfoque es que los cálculos pesados ​​se pueden realizar en un hilo separado. Esto permite que el hilo principal (generalmente responsable del mantenimiento de la interfaz de usuario) se ejecute sin bloquear o ralentizar.

Los trabajadores web le permiten realizar cálculos que utilizan el procesador de forma intensiva, sin bloquear la transmisión de la interfaz de usuario. Esta tecnología le permite crear nuevos hilos y asignarles tareas, lo que tiene un efecto beneficioso en el rendimiento de la aplicación. Con este enfoque, las tareas que tardan mucho en completarse no bloquean la ejecución de otras tareas. Al realizar tareas similares en el hilo principal, otras tareas se bloquean.

8. Si accede al elemento DOM varias veces, guarde el enlace en una variable

Obtener una referencia a un elemento DOM es una operación lenta. Si va a acceder a un elemento varias veces, es mejor guardar un enlace en una variable local. Pero aquí es importante recordar que si el elemento, el enlace al cual está almacenado en la variable, luego se elimina del DOM, debe eliminar el enlace de la variable. Por ejemplo, puede hacer esto escribiendo null en una variable. Esto evitará pérdidas de memoria.

9. Esfuércese por declarar variables en el mismo ámbito en el que se utilizarán.

JavaScript, cuando intenta acceder a una variable, primero la busca en el ámbito local. Si no aparece allí, la búsqueda continúa en el ámbito, en el que está incrustado el ámbito local. Esto sucede hasta que se verifican las variables globales. Guardar variables en ámbitos locales acelera el acceso a ellas.

Intente, sin necesidad especial, no usar la palabra clave var al declarar variables. En su lugar, use las palabras clave let y const para declarar variables y constantes, respectivamente. Difieren en el alcance del bloque y algunas otras características útiles. Preste atención al uso de variables en las funciones, tratando de asegurarse de que las variables a las que accede dentro de la función sean locales. Tenga en cuenta los problemas que puede causar la declaración implícita de variables globales.

10. Intenta no usar variables globales

Las variables globales existen durante todo el tiempo que se ejecuta el script. Las variables locales se destruyen cuando se destruye el alcance local. Por lo tanto, las variables globales solo deben usarse cuando sea realmente necesario.

11. Aplicar en optimizaciones de código JavaScript que aplicarías a programas escritos en otros idiomas

• Utilice siempre algoritmos con la complejidad computacional más pequeña posible, resuelva problemas utilizando estructuras de datos óptimas.
• Optimice los algoritmos utilizados para obtener los mismos resultados con menos cálculos.
• Evita las llamadas recursivas.
• Diseñe piezas repetidas de computación como funciones.
• Simplifica los cálculos matemáticos.
• Utilice matrices de búsqueda en lugar de construcciones de interruptor / caso.
• Esfuércese por garantizar que las condiciones verificadas en las construcciones condicionales con mayor frecuencia tomen valores verdaderos. Esto contribuye a un uso más eficiente de las capacidades del procesador para la ejecución proactiva de instrucciones.
• Si tiene la oportunidad de utilizar operadores bit a bit para realizar ciertas acciones, haga esto. Realizar tales cálculos requiere menos recursos del procesador.

12. Use herramientas de investigación de rendimiento de aplicaciones

Para explorar varios aspectos de los proyectos web, se puede recomendar la herramienta Lighthouse. Califica la aplicación en función de los siguientes indicadores: rendimiento, aplicación web progresiva, accesibilidad, mejores prácticas, SEO. Lighthouse no solo da marcas, sino que también da recomendaciones para mejorar el proyecto. Se creó otra herramienta de análisis de productividad, Google PageSpeed , para ayudar a los desarrolladores a explorar sus sitios y ver cómo pueden mejorar.

Tanto Lighthouse como PageSpeed ​​no son herramientas perfectas, pero su uso ayuda a ver problemas que, a primera vista, pueden resultar invisibles.

En el menú de Chrome, puede encontrar el comando que abre el administrador de tareas. Muestra información sobre los recursos del sistema utilizados por las pestañas abiertas del navegador. Puede obtener información más detallada sobre lo que está sucediendo en la página abriendo la pestaña Rendimiento de las Herramientas para desarrolladores de Chrome (otros navegadores tienen herramientas similares). Esta pestaña le permite analizar muchos indicadores relacionados con el rendimiento del sitio.


Pestaña Rendimiento en Herramientas para desarrolladores de Chrome

Durante la recopilación de información sobre el rendimiento de la página con Chrome, puede configurar el procesador y los recursos de red disponibles para las páginas, lo que le permite identificar y solucionar problemas.


Análisis de rendimiento de la página de Chrome

Para analizar el sitio web más a fondo, puede utilizar la sincronización de navegación API. Le permite medir varios indicadores directamente en el código de la aplicación.

Si está desarrollando proyectos del lado del servidor usando JavaScript usando Node.js, entonces puede usar la plataforma NodeSource para un análisis en profundidad de sus aplicaciones. Las medidas tomadas por las herramientas de esta plataforma tienen poco impacto en el proyecto. En el entorno Node.js, como en el navegador, pueden surgir muchos problemas, como las mismas pérdidas de memoria. El análisis de proyectos basados ​​en Node.js ayuda a identificar y solucionar problemas con su rendimiento.

Resumen

Es importante mantener un equilibrio entre la optimización del código y la legibilidad. El código es interpretado por una computadora, pero la gente tiene que soportarlo. Por lo tanto, el código debe ser comprensible no solo para la computadora, sino también para los humanos.

Además, es útil recordar que el rendimiento siempre debe tenerse en cuenta, pero no debe ser más importante que garantizar el funcionamiento sin errores del código e implementar las capacidades de las aplicaciones que los usuarios necesitan.

Estimados lectores! ¿Cómo optimizas tus proyectos JS?