10 consejos y trucos de JavaScript para optimizar el rendimiento

JavaScript es vital para el desarrollo web. El idioma está detrás de la mayor parte de la interactividad y la animación que verá en los sitios web. Pero JavaScript también puede hacer que un sitio web se ralentice si el código está mal escrito. Las ineficiencias pueden dar como resultado tiempos de carga deficientes y una velocidad de renderizado lenta.

Adopte las siguientes prácticas para mejorar la velocidad y el rendimiento de su sitio web.

1. Definir variables localmente

Como programador, necesitas saber cómo funciona el alcance. Hay dos tipos de variables en JavaScript: variables locales y variables globales.

Las variables locales son variables declaradas dentro de un bloque de funciones. El alcance permanece dentro de la función solo en la que se declaran. Las variables globales son variables accesibles en todo el script. En el caso de las variables globales, el alcance se mantiene durante todo el programa.

Cada vez que intenta acceder a una variable, el navegador hace algo conocido como búsqueda de alcance. Comprueba el ámbito más cercano para la variable y sigue buscando hasta que encuentra la variable. Por lo tanto, cuanto más cadena de alcance tenga en su programa, más tiempo le llevará acceder a las variables más allá del alcance actual.

Por esta razón, es mejor siempre definir sus variables más cerca del contexto de ejecución. Solo use variables globales en raras ocasiones; cuando desea almacenar datos utilizados en todo el script, por ejemplo. Esto reducirá el número de ámbitos en su programa, mejorando así el rendimiento.

2. Cargar JavaScript de forma asíncrona

JavaScript es un lenguaje de programación de un solo subproceso. Esto significa que una vez que se ejecuta una función, tiene que ejecutarse hasta el final antes de que se pueda ejecutar otra función. Esta arquitectura puede dar lugar a situaciones en las que el código puede bloquear el subproceso y congelar la aplicación.

Para que el subproceso siga funcionando bien, debe ejecutar ciertas tareas de pérdida de tiempo de forma asincrónica. Cuando una tarea se ejecuta en asincronía, no consume toda la potencia de procesamiento del subproceso. En su lugar, la función se une a una cola de eventos donde se activa después de la ejecución de todos los demás códigos.

Las llamadas API son perfectas para el patrón asíncrono porque tardan en resolverse. Entonces, en lugar de que detenga el hilo, usaría una biblioteca basada en promesas como la API de recuperación para obtener los datos de forma asíncrona. De esa manera, se puede ejecutar otro código mientras el navegador recupera datos de la API.

Comprenda las complejidades de la programación asincrónica y mejorará el rendimiento de su aplicación.

3. Evite bucles innecesarios

Usar bucles en JavaScript puede ser costoso si no tienes cuidado. Recorrer una colección de elementos puede ejercer mucha presión sobre el navegador.

Si bien definitivamente no puede evitar los bucles en su código, debe trabajar lo menos posible en ellos. Puede usar otras técnicas que evitan la necesidad de recorrer la colección.

Por ejemplo, puede almacenar la longitud de una matriz en una variable diferente, en lugar de leerla durante cada iteración del bucle. Si obtiene lo que quiere de un bucle, salga de él inmediatamente.

4. Minificar código JavaScript

La minificación es un método eficaz para optimizar el código JavaScript. Un minimizador transforma su código fuente sin procesar en un archivo de producción más pequeño. Eliminan comentarios, recortan sintaxis innecesaria y acortan nombres de variables largos. También eliminan el código no utilizado y optimizan las funciones existentes para ocupar menos líneas.

Ejemplos de minimizadores son Google Closure Compiler, UglifyJS y Microsoft AJAX minifier. También puede minimizar manualmente su código inspeccionándolo y buscando formas de optimizarlo. Por ejemplo, puedes simplificar las declaraciones if en su código.

5. Comprimir archivos grandes con Gzip

La mayoría de los clientes usa Gzip para comprimir y descomprimir grandes archivos de JavaScript. Cuando un navegador solicita un recurso, el servidor puede comprimirlo para devolver un archivo más pequeño en la respuesta. Cuando el cliente recibe el archivo, lo descomprime. En general, este enfoque ahorra ancho de banda y reduce la latencia, lo que mejora el rendimiento de la aplicación.

6. Minimizar el acceso DOM

Acceder al DOM puede afectar el rendimiento de su aplicación porque el navegador debe actualizarse con cada actualización del DOM. Es mejor limitar el acceso DOM a la menor frecuencia posible. Una forma de hacerlo es almacenando referencias a objetos del navegador.

También puede usar una biblioteca como React que realiza cambios en el DOM virtual antes de enviarlos al DOM real. Como resultado, el navegador actualiza las partes de la aplicación que necesitan actualizarse, en lugar de actualizar toda la página.

7. Aplazar la carga innecesaria de JavaScript

Si bien es esencial que su página se cargue a tiempo, no es necesario que todas las funciones funcionen en la carga inicial. Supongamos que tiene un botón en el que se puede hacer clic y un menú de pestañas que hacen referencia al código JavaScript; puede diferir ambos hasta que se cargue la página.

Este método libera potencia de procesamiento, lo que le permite representar los elementos de página necesarios a tiempo. Retrasa la compilación del código que podría contener la visualización inicial de la página. Luego, una vez que la página termine de cargarse, puede comenzar a cargar las funcionalidades. De esa manera, el usuario puede disfrutar de un tiempo de carga rápido y comenzar a interactuar con los elementos a tiempo.

También puede incluir la menor cantidad de CSS y JavaScript en su elemento principal, para que se cargue de inmediato. El código secundario puede vivir en archivos .css y .js separados. Esta técnica requiere un conocimiento decente de cómo funciona el DOM.

8. Use un CDN para cargar JavaScript

El uso de una red de entrega de contenido ayuda a acelerar el tiempo de carga de la página, pero no siempre es efectivo. Por ejemplo, si elige un CDN sin un servidor local en el país de un visitante, no se beneficiarán.

Para resolver este problema, puede usar herramientas para comparar varias CDN y decidir cuál ofrece el mejor rendimiento para su caso de uso. Para saber qué CDN es mejor para su biblioteca, consulte la cdnjs sitio web.

9. Eliminar fugas de memoria

Las fugas de memoria pueden afectar negativamente el rendimiento de una aplicación. Las fugas ocurren cuando la página cargada ocupa más y más memoria.

Un ejemplo de pérdida de memoria es cuando su navegador comienza a ralentizarse después de una larga sesión de trabajo con la aplicación.

Puede usar las herramientas para desarrolladores de Chrome para detectar pérdidas de memoria en su aplicación. La herramienta registra la línea de tiempo en la pestaña de rendimiento. Muchas pérdidas de memoria ocurren como resultado de la eliminación de elementos DOM. El recolector de basura solo liberará memoria una vez que todas las variables que hacen referencia a estos elementos estén fuera del alcance.

Herramientas como Lighthouse, Google PageSpeed ​​Insights y Chrome pueden ayudarlo a detectar problemas. Lighthouse comprueba la accesibilidad, el rendimiento y los problemas de SEO. Google PageSpeed ​​puede ayudarlo a optimizar JavaScript para mejorar el rendimiento de su aplicación.

El navegador Chrome proporciona una función de herramientas para desarrolladores que puede alternar haciendo clic en F12 en su palabra clave. Puede usar su análisis de rendimiento para encender y apagar la red y verificar el consumo de CPU. También verifica otras métricas para descubrir problemas que afectan a su sitio web.

Como desarrollador web, trabajará mucho en su navegador web. La mayoría de los navegadores vienen con un conjunto de herramientas de desarrollo para ayudarlo a solucionar problemas del sitio web. La función Herramientas para desarrolladores de Google Chrome tiene muchas funciones para ayudarlo.