por Contenidos
JavaScript es vital para el desarrollo web. El lenguaje es la base 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, necesita 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 donde 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 realiza una operación conocida como búsqueda de alcance. Verifique el alcance más cercano para la variable y siga buscando hasta que encuentre la variable. Por lo tanto, cuanto más cadena de alcance tenga en su programa, más tiempo llevará acceder a las variables más allá del alcance actual.
Por esta razón, es mejor definir siempre las variables más cercanas al contexto de ejecución. Use variables globales solo en raras ocasiones; cuando desea almacenar datos utilizados en todo el script, por ejemplo. Esto reducirá el número de ámbitos en el 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, debe ejecutarse hasta el final antes de que se pueda ejecutar otra función. Esta arquitectura puede conducir a situaciones en las que su código puede bloquear el hilo y bloquear su aplicación.
Para que el subproceso funcione sin problemas, algunas tareas que consumen mucho tiempo deben realizarse de forma asincrónica. Cuando una tarea se ejecuta de forma asíncrona, 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 que se haya ejecutado el resto del código.
Las llamadas a la API son perfectas para el modelo asincrónico porque tardan en resolverse. Entonces, en lugar de retener el hilo, usaría una biblioteca basada en promesas como la API de recuperación para obtener los datos de forma asíncrona. De esta manera, se puede ejecutar otro código mientras el navegador obtiene datos de la API.
Comprenda las complejidades de la programación asincrónica y mejorará el rendimiento de su aplicación.
3. Evita ciclos innecesarios
El uso de bucles en JavaScript puede resultar costoso si no se tiene cuidado. Desplazarse por una colección de elementos puede sobrecargar el navegador.
Si bien definitivamente no puede evitar los bucles en su código, debe trabajar con ellos lo menos posible. Puede utilizar otras técnicas que evitan la necesidad de desplazarse por 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 ciclo. Si obtiene lo que quiere de un bucle, salga inmediatamente.
4. Minificar código JavaScript
La minificación es un método eficaz para optimizar el código JavaScript. Un minimizador convierte 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 minificadores 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, puede simplificar declaraciones if en su código.
5. Comprime archivos grandes con Gzip
La mayoría de los clientes usan Gzip para comprimir y descomprimir archivos JavaScript de gran tamaño. 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. Minimice el acceso al DOM
El acceso a DOM puede afectar el rendimiento de su aplicación porque el navegador necesita actualizarse con cada actualización de DOM. Es mejor limitar el acceso al DOM a la menor frecuencia posible. Una forma de hacer esto es almacenar 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 deben 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. Digamos que tenemos un botón en el que se puede hacer clic y un menú con pestañas que hace referencia al código JavaScript; puede posponer ambos hasta que la página se haya cargado.
Este método libera potencia de procesamiento, permitiéndole renderizar los elementos de página necesarios a tiempo. Retrasa la compilación del código que podría contener la vista inicial de la página. Luego, una vez que la página haya terminado de cargarse, puede comenzar a cargar las funciones. De esta manera, el usuario puede disfrutar de tiempos de carga rápidos y comenzar a interactuar con los elementos a tiempo.
También puede incluir CSS y JavaScript mínimos en su elemento principal, para que se cargue de inmediato. El código secundario puede residir en archivos .css y .js separados. Esta técnica requiere una comprensión justa de cómo funciona el DOM.
8. Usa 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 lo aprovecharán.
Para resolver este problema, puede usar las herramientas para comparar diferentes CDN y decidir cuál funciona mejor para su caso de uso. Para saber qué CDN es mejor para su biblioteca, visite el sitio web de cdnjs.
9. Elimina las 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 el navegador comienza a ralentizarse después de una larga sesión de trabajo con la aplicación.
Puede utilizar las herramientas de desarrollo 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 elementos no utilizados solo liberará memoria cuando todas las variables que hagan 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 activar haciendo clic en F12 en la palabra clave. Puede usar su análisis de rendimiento para encender y apagar su red y verificar el consumo de CPU. Consulte también 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.
