Rendimiento en Javascript
JavaScript es una parte esencial de casi todas las aplicaciones web y software basado en la web. Las capacidades de secuencias de comandos del lado del cliente de JavaScript pueden hacer que las aplicaciones sean más dinámicas e interactivas, pero también aumentan la posibilidad de ineficiencias en el código. Por lo tanto, JavaScript mal escrito puede dificultar la garantía de una experiencia coherente y saludable para todos los usuarios.
La siguiente guía le informará sobre las causas de los problemas de rendimiento de JavaScript y le brindará algunas de las mejores prácticas para optimizar el código JavaScript.
Utilice el recorrido DOM rápido con document.getElementById().
Dada la disponibilidad de jQuery, es mucho más fácil producir selectores altamente específicos basados en una combinación de nombres de etiquetas, clases y CSS3. Debe tener en cuenta que este enfoque implica varias iteraciones mientras jQuery recorre cada uno de los elementos DOM e intenta encontrar una coincidencia. Puede mejorar las velocidades de recorrido del DOM eligiendo un elemento específico por ID.
Ejemplo:
// jQuery will need to iterate until it finds the right element
let button = jQuery('body div.dialog > div.close-button:nth-child(4)')[0];
El código anterior utiliza JQuery para manipular el DOM, que no es la mejor opción, ya que en lugar de hacerlo de esta manera, podemos utilizar el método getElementById que nos proporciona el objeto del documento.
// A far more optimized way is to use document.getElementById.
let button = document.getElementById('dialog-close-button');
Retrasar la carga de JavaScript El
lugar donde cargamos nuestras hojas de estilo y los archivos de JavaScript puede tener un efecto en la velocidad percibida de una página si el usuario puede ver algún contenido incluso antes de que JavaScript lo absorba. Es una experiencia mucho mejor cuando un navegador encuentra una etiqueta de secuencia de comandos y se detiene. lo que está haciendo completamente para descargar y ejecutar el script si colocamos nuestros scripts en la parte superior de la página, lo que significa que está descargando nuestros archivos JavaScript primero y luego analizando nuestro cuerpo HTML, esto significa que mientras nuestros scripts se están descargando no hay contenido para que el usuario vea ahora si colocamos nuestras secuencias de comandos en la parte inferior de la página en lugar de que, cuando nuestra secuencia de comandos comience a cargarse, haya al menos algo de contenido en la página, lo que hace que la página parezca haberse cargado más rápido.
Una alternativa es usar diferir en la etiqueta del script. El atributo defer especifica que la secuencia de comandos debe ejecutarse después de que la página haya terminado de analizarse, pero solo funciona para secuencias de comandos externas.
Ejemplo:
// placing script at the end: <html> <head> <title>My Page</title> </head> <body> <div id="user-greeting">Welcome back, user</div> <script type="text/javascript" src="my-script.js"></script> </body> </html> // using defer: <script type="text/javascript" src="path/to/script2.js" defer></script>
Use ‘cambiar’ en lugar de largas declaraciones ‘if-then-else’.
Cuando su base de código crece, una declaración de cambio suele ser más eficiente que un conjunto de ifs anidados. Esto se debe a que las declaraciones ‘switch’ se pueden optimizar más fácilmente durante la compilación.
Deshágase de los bucles innecesarios y de las llamadas realizadas dentro de los bucles.
Las instrucciones Array push() pop() y shift() tienen una sobrecarga de procesamiento mínima debido a que son construcciones de lenguaje estrechamente relacionadas con sus contrapartes de lenguaje ensamblador de bajo nivel.
Ejemplo:
// push() method
let Animals = ["Tiger", "Giraffe", "Horse", "Deer"];
Animals.push("Zebra");
console.log(Animals);
// pop() method let Animals = ["Tiger", "Giraffe", "Horse", "Deer"]; Animals.pop(); console.log(Animals);
// shift() method let Animals = ["Tiger", "Giraffe", "Horse", "Deer"]; Animals.shift(); console.log(Animals);
Minimice su código tanto como pueda
. Empaquetar los componentes de su aplicación en archivos *.js y pasarlos a través de una herramienta de minificación de JavaScript hará que su código sea más limpio. Hay toneladas de herramientas de minificación de código que están disponibles de forma gratuita.
Use el alcance local («esto»).
Esto es particularmente útil para escribir código asíncrono usando devoluciones de llamada, sin embargo, también mejora el rendimiento porque no depende de variables globales o de cierre que se encuentran más arriba en la string de alcance. Puede aprovechar al máximo la variable de alcance (esto) reconectándola con los métodos especiales call() y apply() que están integrados en cada función. Vea el ejemplo a continuación:
Ejemplo:
let Organization = Object.create({
init: function(name) {
this.name = name;
},
do: function(callback) {
callback.apply(this);
}
});
let geeksforgeeks = new Organization('geeksforgeeks');
geeksforgeeks.do(function() {
alert(this.name); // 'geeksforgeeks' gets alerted because we rewired 'this'.
});
Publicación traducida automáticamente
Artículo escrito por AnkitMishra16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA