Rendimiento de JavaScript

El rendimiento de la Web es una métrica objetiva, también es la percepción y la experiencia del usuario durante el tiempo de carga y ejecución.

El rendimiento de la Web es el tiempo necesario para cargar, interactuar y responder el sitio web, así como la suavidad del contenido durante la interacción del usuario.

Muchas funciones pueden afectar el rendimiento, incluyendo retrasos, tamaño de la aplicación, número de nodos del DOM, número de solicitudes de recursos emitidas, rendimiento de JavaScript, carga de CPU, etc.

¿Cómo mejorar el rendimiento de la Web?

Reducir la actividad del bucle

Las instrucciones que se pueden colocar fuera del bucle o las asignaciones reducirán la actividad del bucle y harán que se ejecute más rápido.

En el siguiente ejemplo, accedemos a la propiedad length del array en cada iteración del bucle:

for (let i = 0; i < arr.length;++) {

En el siguiente ejemplo, accedemos a la propiedad length fuera del bucle y hacemos que el bucle funcione más rápido:

let size = arr.length;
for (let i = 0; i < size;++) {

Mejorar la eficiencia de acceso al DOM

En comparación con otras instrucciones de JavaScript, el acceso al DOM de HTML es muy lento.

Si necesita acceder varias veces a elementos del DOM, acceda una vez y úselo como variable local.

Coloque JavaScript en el final de la página

Coloque el script al final del cuerpo de la página para que el navegador pueda cargar primero la página.

Cuando se descarga un script, el navegador no iniciará ninguna otra descarga y todas las actividades de análisis y renderizado pueden ser bloqueadas.

Una forma alternativa es usardefer="true". EsteRetrasoEl atributo de propiedad del script debe estar completado después de que la página se haya analizado, pero solo se aplica a scripts externos.

No utilice la palabra clave 'with'

La palabra clave with se considera 'inútil', ya que tiene algunos defectos muy frustrantes.

A pesar de que with simplifica el proceso de manejo de propiedades locales, el uso de with aumenta el costo de búsqueda de variables en otros scopes.

No se permite el uso de palabras clave en el modo estricto.

Menos solicitudes HTTP

Al combinar archivos externos e incluir JavaScript directamente en la página HTML, se minimizan las solicitudes HTTP necesarias para renderizar la página.

Cada acceso único al servidor HTTP causará una gran demora.

No utilice el mismo script dos veces

Los scripts repetidos tienen un impacto significativo en el rendimiento. Los scripts repetidos crearán solicitudes innecesarias en HTTP, especialmente en el navegador IE.

No utilice eval()

A pesar de queeval()La función es una buena manera de ejecutar código arbitrario, pero cada cadena que se pasa a la función eval debe ser analizada y ejecutada inmediatamente. Cada vez que se alcanza una llamada a la función eval, se produce un costo.