JavaScript se ha convertido en uno de los lenguajes de programación más populares de todos los tiempos. Según los datos de W3Tech, casi el 96% de los sitios web del mundo lo están utilizando. Un hecho clave sobre la Web es que no se pueden controlar las especificaciones de hardware de los dispositivos que utilizan los usuarios que visitan el sitio web. Cuando los usuarios finales visitan su sitio web, pueden utilizar equipos de gama alta o equipos de gama baja, y las condiciones de conexión de la red pueden variar. Esto significa que debe optimizar su sitio web tanto como sea posible para satisfacer las necesidades de cualquier usuario.
Este artículo enumera algunos consejos que pueden ayudarlo a escribir mejor código JavaScript para mejorar el rendimiento.
Por cierto, comparta y reutilice sus componentes JS para mantener el equilibrio adecuado entre el código de alta calidad (se necesita tiempo para escribirlo) y el tiempo de entrega razonable. Puede usar herramientas populares como Bit para compartir componentes en cualquier proyecto (JS común, TS, React, Vue, etc.) al centro de componentes de Bit sin mucho esfuerzo.
1. Elimine el código y las funciones que no utilice. Cuanto más código contenga su aplicación, más datos deberá transmitir al cliente. El navegador también necesita más tiempo para analizar e interpretar el código. A veces, puede incluir muchas funciones que no usa en absoluto. Es mejor mantener estos códigos adicionales en el entorno de desarrollo en lugar de enviarlos al entorno de producción, para no sobrecargar el navegador del cliente.
Siga preguntándose si es necesaria una determinada función o segmento de código. Puede eliminar manualmente los códigos no utilizados, o puede utilizar herramientas como Uglify o Closure Compiler de Google para eliminarlos. Incluso puede utilizar una técnica llamada optimización de vibración de árbol para eliminar el código no utilizado de su aplicación. El software de empaquetado, como Webpack, proporciona esta tecnología. Para obtener más información, consulte aquí. Si desea eliminar los paquetes npm no utilizados, puede utilizar el comando npm prune. Para obtener más información, consulte la documentación de NPM.
2. Almacene la caché tanto como sea posible para reducir la latencia y el tráfico de red, reduciendo así el tiempo requerido para mostrar la representación del recurso, a fin de mejorar la velocidad y el rendimiento del sitio web. El almacenamiento en caché se puede lograr con la ayuda de Cache API o HTTP. Es posible que desee saber qué sucede cuando cambia el contenido. Cuando se cumplen ciertas condiciones (como la publicación de contenido nuevo), el mecanismo de almacenamiento en caché anterior puede procesar y regenerar el caché.
3. Evite pérdidas de memoria Como lenguaje de alto nivel, JS será responsable de algunas tareas de administración de bajo nivel, como la administración de memoria. La recolección de basura es un proceso común a la mayoría de los lenguajes de programación. En términos simples, la recolección de basura es la recolección y liberación de memoria que se ha asignado a un objeto, pero que aún no se ha utilizado en ninguna parte del programa. En un lenguaje de programación como C, los desarrolladores deben usar las funciones malloc () y dealloc () para manejar las operaciones de asignación y desasignación de memoria.
Aunque la recolección de basura se realiza automáticamente en JavaScript, no es perfecta en algunos casos. En JavaScript ES6, se introdujeron Map and Set y sus objetos hermanos "más débiles". Las contrapartes "débiles" llamadas WeakMap y WeakSet contienen referencias "débiles" a objetos. Permiten que los valores no referenciados se recolecten como basura, evitando así pérdidas de memoria. Puede leer más sobre WeakMaps aquí.
4. Romper el bucle lo antes posible. Los bucles grandes definitivamente consumirán una gran cantidad de tiempo precioso, por lo que debe romperlos lo antes posible. Puede usar la palabra clave break y continuar para hacer esto. Es su responsabilidad escribir el código más eficiente. En el siguiente ejemplo, si no se sale del bucle, su código se ejecutará 1000000000 veces en el bucle, lo que obviamente estará sobrecargado.
let arr = new Array (1000000000) .fill ('----');
arr [970] = 'encontrado'; for (sea i = 0; i <longitud de arr; i ++) {if (arr [i] === 'encontrado') {console.log ("Encontrado"); descanso;
}
}
En el siguiente ejemplo, si no continúa cuando el ciclo no cumple con sus criterios, seguirá ejecutando la función 1000000000 veces. Solo nos ocupamos de ello cuando el elemento de la matriz está en una posición uniforme. Esto reduce la ejecución del bucle a casi la mitad.
let arr = new Array (1000000000) .fill ('----');
arr [970] = 'encontrado'; para (sea i = 0; i <longitud de arr; i ++) {if (i% 2! = 0) {continuar;
};
proceso (arr [i]);
}
Puede obtener más información sobre la relación entre ciclo y rendimiento aquí.
5. Minimizar el número de cálculos de variables Para reducir el número de cálculos de variables, se pueden utilizar cierres. En términos sencillos, los cierres en JavaScript le permiten acceder al alcance de las funciones externas desde las funciones internas. Se crea un cierre cada vez que se crea una función (no se llama). La función interna tendrá acceso a las variables en el ámbito externo, incluso después de regresar a la función externa. Veamos dos ejemplos. Estos ejemplos son del blog de Bret.
function findCustomerCity (nombre) {const texasCustomers = ['John', 'Ludwig', 'Kate'];
const californiaCustomers = ['Wade', 'Lucie', 'Kylie'];
return texasCustomers.includes (name)? 'Texas':
californiaCustomers.includes (name)? 'California': 'Desconocido';
};
Si llama a la función anterior varias veces, se creará un nuevo objeto cada vez. Cada vez que se llama, las variables texasCustomers y CaliforniaCustomers provocarán una reasignación de memoria innecesaria.
function findCustomerCity () {const texasCustomers = ['John', 'Ludwig', 'Kate'];
const californiaCustomers = ['Wade', 'Lucie', 'Kylie'];
return name => texasCustomers.includes (name)? 'Texas':
californiaCustomers.includes (name)? 'California': 'Desconocido';
}; dejar cityOfCustomer = findCustomerCity ();
cityOfCustomer ('John'); // TexascityOfCustomer ('Wade'); // CaliforniacityOfCustomer ('Max'); // Desconocido
En el ejemplo anterior, con la ayuda del cierre, la función interna que regresa a la variable cityOfCustomer puede acceder a la constante de la función externa findCustomerCity (). Además, siempre que se llame a la función interna con el nombre pasado como parámetro, no es necesario volver a crear una instancia de la constante. Para obtener más información sobre los cierres, le sugiero que lea la publicación del blog de Prashant.
6. Minimice el acceso al DOM: en comparación con otras declaraciones de JavaScript, la velocidad de acceso al DOM es muy lenta. Si realiza un cambio en el DOM y activa un nuevo dibujo del diseño, tendrá que esperar un poco. Para reducir la cantidad de visitas al elemento DOM, visítelo una vez y luego utilícelo como una variable local. Después de completar los requisitos, asegúrese de establecerlo en nulo para eliminar el valor de la variable. Esto evitará pérdidas de memoria, ya que esto desencadenará el proceso de recolección de basura.
7. Los archivos comprimidos pueden reducir el tamaño de los archivos JavaScript mediante métodos de compresión (como Gzip). Los archivos más pequeños mejorarán el rendimiento de su sitio web porque el navegador solo necesita descargar activos más pequeños. Este tipo de método de compresión puede reducir el tamaño del archivo hasta en un 80%. Lea más sobre la compresión aquí.
8. Reducir el código final Algunas personas piensan que reducir y comprimir son lo mismo, pero no es así. En compresión, usamos un algoritmo especial para cambiar el tamaño de salida del archivo; al reducir, necesitamos eliminar comentarios y espacios adicionales en el archivo JavaScript. Se pueden encontrar muchas herramientas y paquetes de software en línea para ayudar con este proceso. La reducción se ha convertido en una práctica estándar para la optimización de páginas y uno de los pasos principales en la optimización del front-end. La reducción puede reducir el tamaño del archivo hasta en un 60%. Puede leer más sobre cómo alejar la imagen aquí.
9. Usando Throttle y Debounce, podemos usar estas dos técnicas para controlar estrictamente el número de eventos que el código necesita manejar. La limitación es el número máximo de veces que puede expirar el tiempo de espera de la función especificada. Por ejemplo, "ejecute la función de evento onkeyup como máximo una vez cada 1000 milisegundos". En otras palabras, incluso si presiona 20 teclas por segundo, el evento solo se activará una vez por segundo. Esto reducirá la carga del código. Por otro lado, anti-vibración es especificar el período de tiempo más corto para ejecutar la misma función nuevamente desde la última vez que se ejecutó la misma función. En otras palabras, "Esta función se ejecutará al menos 600 milisegundos después de la última vez que se llamó a la función". Para obtener más información sobre el flujo articulado y el anti-vibración, aquí hay un comienzo rápido. Puede implementar sus propias funciones anti-vibración y limitación, o puede importarlas desde bibliotecas como Lodash y Underscore.
10. Evite el uso de la palabra clave Delete. La palabra clave delete se usa para eliminar atributos de un objeto. El rendimiento de esta palabra clave no es muy bueno y se espera que se corrija en una actualización futura. O simplemente puede establecer las propiedades no deseadas como indefinidas.
const object = {nombre: "Jane Doe", edad: 43}; object.age = undefined;
También puede utilizar el objeto Mapa, Bret cree que su método de eliminación será más rápido.
11. Utilice código asincrónico para evitar el bloqueo de subprocesos. Debe saber que JavaScript es síncrono y de un solo subproceso de forma predeterminada. Pero en algunos casos, su código requiere muchos cálculos. El código es inherentemente síncrono, lo que significa que mientras se ejecuta un fragmento de código, se bloqueará la ejecución de otras declaraciones de código hasta que la primera finalice la ejecución. Esto reducirá el rendimiento general. Pero podemos evitar esta situación mediante código asincrónico. El código asincrónico se escribió anteriormente en forma de devoluciones de llamada, pero ES6 introdujo un nuevo estilo de manejo de código asincrónico. Este nuevo estilo se llama Promesa. Puede obtener más información sobre devoluciones de llamada y promesas en la documentación oficial de MDN. Pero espere ... JavaScript es sincrónico de forma predeterminada y también es de un solo subproceso. ¿Cómo ejecutar código asincrónico en un solo hilo? Aquí es donde mucha gente está confundida. Para hacer esto, se basa principalmente en el motor JavaScript que se ejecuta en segundo plano en el navegador. Un motor de JavaScript es un programa de computadora o un intérprete que ejecuta código JavaScript. El motor de JavaScript se puede escribir en varios idiomas. Por ejemplo, el motor V8 que soporta el navegador Chrome está escrito en C ++, mientras que el motor SpiderMonkey que soporta el navegador Firefox está escrito en C y C ++. Estos motores de JavaScript pueden procesar tareas en segundo plano. Según Brian, la pila de llamadas puede identificar funciones de API web y entregarlas al navegador para su procesamiento. Una vez que el navegador complete estas tareas, volverán y se insertarán en la pila como devoluciones de llamada. Quizás se esté preguntando cómo Node.js realiza estas tareas, después de todo, no tiene la ayuda de un navegador. De hecho, el motor V8 que admite Chrome también es el soporte detrás de Node.js. Aquí hay una excelente publicación de blog de Salil que explica este proceso en el ecosistema de Node.
12. Use la división de código Si tiene experiencia en el uso de Google Light House, definitivamente estará familiarizado con un indicador llamado "primera pintura con contenido". Es una de las seis métricas que se registran en la sección Rendimiento del informe Lighthouse. First Contentful Paint (FCP) mide el tiempo que tarda el navegador en representar el primer contenido DOM después de que el usuario accede a su página. Las imágenes, los elementos no blancos y los SVG de la página se consideran contenido DOM; no hay contenido dentro del iframe. Una de las mejores formas de obtener una puntuación FCP más alta es utilizar la división de código. La división de código es una técnica en la que solo se envían al usuario los módulos necesarios al comienzo de la transmisión. Al reducir el tamaño de la carga útil enviada inicialmente, esto afectará en gran medida la puntuación de FCP. Los empaquetadores de módulos populares (como webpack) pueden proporcionarle capacidades de división de código. También puede utilizar módulos ES nativos para cargar cada módulo individualmente. Puede obtener más información sobre los módulos nativos de ES aquí.
13. Uso de async y diferir En los sitios web modernos, los scripts son más densos que HTML, su tamaño es mayor y consumen más tiempo de procesamiento. De forma predeterminada, el navegador debe esperar a que la secuencia de comandos se descargue y se ejecute antes de procesar el resto de la página. Por lo tanto, los scripts torpes pueden impedir que las páginas web se carguen. Para evitar esta situación, JavaScript nos proporciona dos tecnologías llamadas async y defer. Solo necesita agregar estos atributos a
14. Utilice Web Workers para ejecutar tareas de uso intensivo de la CPU en segundo plano. Los Web Workers le permiten ejecutar scripts en subprocesos en segundo plano. Si tiene algunas tareas de alta intensidad, puede asignarlas a Web Workers, que pueden ejecutarlas sin interferir con la interfaz de usuario. Después de la creación, el Web Worker puede publicar mensajes en el controlador de eventos especificado por el código para comunicarse con el código JavaScript y viceversa. Para obtener más información sobre los Web Workers, le sugiero que lea la documentación de MDN.
【免责声明：本文图片及文字信息均由千锋重庆Java培训小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】