Creo que todos saben que JavaScript es un lenguaje de desarrollo completo, y JS se puede ver en el navegador, el teléfono móvil y el lado del servidor. Este artículo compartirá algunas mejores prácticas eficientes de JavaScript para mejorar su comprensión de los JS y los principios de implementación subyacentes.
Almacenamiento de datos
Hay un problema clásico en la disciplina de la computadora que logra un rendimiento óptimo de lectura y escritura al cambiar la ubicación del almacenamiento de datos. En JavaScript, la ubicación del almacenamiento de datos puede tener un impacto significativo en el rendimiento del código. Si puede crear objetos con {}, no use un objeto nuevo. Si puede crear matrices con [], no use una nueva matriz. La velocidad de acceso de los literales en JS es más alta que la de los objetos. Cuanto más profunda sea la variable en la cadena de alcance, más larga es la práctica requerida para el acceso. Para tales variables, las variables locales se pueden guardar a través del caché, reduciendo el número de accesos a las cadenas de alcance, no hay mucha diferencia entre la notación puntual (objeto.name) y el operador (objeto [nombre]). Solo Safari tendrá una diferencia, y los puntos siempre son más rápidos
ciclo
Hay varios bucles comunes en JS:
for (var i = 0; i <10; i ++) {// haz algo} para (var apto en objeto) {// para objeto de bucle} [1,2] .ForEach (function (value, index, array) {// bucle basado en funciones})No hace falta dudar de que el primer método es nativo, con el consumo de rendimiento más bajo y la velocidad más rápida. El segundo método For-In genera más sobrecarga (variables locales) en cada iteración, y su velocidad es solo 1/7 del primer tipo. El tercer método obviamente proporciona un método de bucle más conveniente, pero su velocidad es solo 1/8 del bucle ordinario. Por lo tanto, puede elegir el método de bucle apropiado de acuerdo con la situación de su proyecto.
Delegación de eventos
Imagínese agregar un evento a cada una etiqueta en la página. ¿Agregaremos un OnClick a cada etiqueta? Esta situación puede afectar el rendimiento cuando hay una gran cantidad de elementos en la página que deben estar vinculados al mismo procesamiento de eventos. Cada evento vinculante aumenta la carga en la página o durante la ejecución. Para una rica aplicación front-end, demasiados enlaces ocuparán demasiada memoria en una página con grandes interacciones. Una forma simple y elegante es la delegación de eventos. Es un flujo de trabajo basado en eventos: captura de captura por capa, alcanzar el objetivo, burbujee la capa por capa. Dado que hay un mecanismo de burbujas para los eventos, podemos manejar eventos que comienzan desde todos los elementos infantiles mediante eventos vinculantes a la capa externa.
document.getElementById ('content'). onClick = function (e) {e = e || Window.event; Var Target = E.Target || E.Sracelement; // Si no es la etiqueta A, saldré si (Target.nodenmae! === 'A') {return} // imprimo la dirección de enlace de una consola.log (target.href)}Volver a pintar y reorganizar
Después de que el navegador descargue HTML, CSS y JS, se generarán dos árboles: el árbol DOM y el árbol de representación. Cuando las propiedades geométricas de DOM cambian, como el ancho y la altura de Dom, o el color, la posición, el navegador necesita recalcular las propiedades geométricas del elemento y reconstruir el árbol de representación. Este proceso se llama redibujado y reorganización.
Bodystyle = document.body.style; BodyStyle.color = rojo; BodyStyle.Height = 1000px; BodyStyke.Width = 100%;
Al modificar las tres propiedades en el método anterior, el navegador volverá a pintar tres veces. En algunos casos, reducir esta reorganización puede mejorar el rendimiento de representación del navegador. El método recomendado es el siguiente: solo se realiza una operación y se completan tres pasos:
Bodystyle = document.body.style; BodyStyle.csstext 'Color: rojo; altura: 1000px; ancho: 100%';
Carga de JavaScript
IE8, Firefox3.5 y Chrome2 permiten la descarga requerida de los archivos JavaScript. Entonces, <script> no bloqueará otras descargas de etiquetas. Desafortunadamente, el proceso de descarga JS aún bloqueará la descarga de otros recursos, como las imágenes. Aunque los últimos navegadores mejoran el rendimiento al permitir descargas paralelas, el bloqueo de script sigue siendo un problema. Por lo tanto, se recomienda colocar todas las etiquetas <script> en la parte inferior de las etiquetas <body> para minimizar el impacto en la representación de toda la página y evitar que los usuarios vean un espacio en blanco.
Implementación de archivos JS de alto rendimiento
Dado que ya sabe que múltiples etiquetas <script> afectarán la velocidad de representación de la página, no es difícil entender que "reducir el HTTP requerido para la representación de la página" es una regla clásica para la aceleración del sitio web. Por lo tanto, fusionar todos los archivos JS en el entorno del producto reducirá la cantidad de solicitudes, acelerando así la representación de la página. Además de fusionar archivos JS, también podemos comprimir archivos JS. La compresión se refiere a eliminar partes de un archivo que no están relacionados con la ejecución. El contenido despojado incluye personajes de espacios en blanco y comentarios. El proceso de modificación generalmente puede reducir el tamaño del archivo a la mitad. También hay algunas herramientas de compresión que reducen la longitud de las variables locales, como:
var myname = "foo" + "bar"; // Después de la compresión, se convierte en var a = "foobar";
Archivos de caché JS
Los componentes HTTP en caché pueden mejorar enormemente la experiencia del usuario de las visitas de devolución del sitio web. El servidor web utiliza el "Encabezado de respuesta HTTP" para decirle al cliente cuánto tiempo debe almacenarse en caché un recurso. Por supuesto, Cache también tiene sus propios defectos: cuando se actualiza la aplicación, debe asegurarse de que el usuario descargue el último contenido estático. Este problema se puede resolver cambiando el nombre del archivo del recurso estático. Puede ver la referencia del navegador JSApplication-20151123201212.js en el entorno del producto. Esto es para guardar el nuevo archivo JS en una marca de tiempo, resolviendo así el problema de que el caché no se actualiza.
Resumir
Por supuesto, el JS eficiente no se trata solo de estas cosas que se pueden mejorar. Si se pueden reducir algunas pérdidas de rendimiento, podemos usar JavaScript para desarrollar de manera más eficiente.