La forma principal de insertar el código JavaScript en la página HTML es a través de la etiqueta de script. Estos incluyen dos formas. El primero es insertar directamente el código JS entre las etiquetas de script, y el segundo es introducir archivos JS externos a través del atributo SRC. Dado que el intérprete bloquea el resto del resto de la página durante el análisis y la ejecución del código JS, causará blanking a largo plazo y retrasos para las páginas con una gran cantidad de código JS. Para evitar este problema, se recomienda colocar todas las referencias JS antes de la etiqueta </body>.
Hay dos atributos de etiquetas de script, diferir y asíncea, por lo que el uso de etiquetas de script se divide en tres situaciones:
1. <script src = "ejemplo.js"> </script>
Sin el atributo Difer o Async, el navegador cargará inmediatamente y ejecutará el script correspondiente. Es decir, antes de representar el documento después de la etiqueta de script, no espera la carga posterior de los elementos del documento y comienza a cargar y ejecutar después de leerlo. Esto bloqueará la carga del documento posterior;
2. <script async src = "ejemplo.js"> </script>
Con el atributo Async, significa que la carga y la representación de documentos posteriores se llevan a cabo en paralelo con la carga y ejecución de los scripts JS, es decir, la ejecución asincrónica;
3. <script difiere src = "ejemplo.js"> </script>
Con el atributo Difer, el proceso de carga de documentos posteriores y la carga del script JS (solo carga pero no se ejecuta en este momento) se llevan a cabo en paralelo (asincrónicamente). La ejecución del script JS debe esperar hasta que todos los elementos del documento estén analizados y antes de que el evento de DomContentTented desencadene la ejecución.
La siguiente figura puede ver intuitivamente la diferencia entre los tres:
Entre ellos, Blue representa el tiempo de carga de la red de script JS, Red representa el tiempo de ejecución del script JS y Green representa la resolución del HTML.
De la figura podemos aclarar los siguientes puntos:
1. Diferir y Async son consistentes en el proceso de carga de la red y se ejecutan de manera asincrónica;
2. La diferencia entre los dos es cuando el script se ejecuta después de cargarlo. Se puede ver que Difer está más en línea con los requisitos de la mayoría de los escenarios para la carga y ejecución del script de la aplicación;
3. Si hay múltiples scripts con atributos de diferir, ejecutan el script en el orden de carga; Para Async, su carga y ejecución están estrechamente vinculadas. Independientemente de la orden de declaración, se ejecutará inmediatamente siempre que se complete la carga. Es de poca utilidad para los scripts de aplicaciones porque no considera las dependencias en absoluto.
resumen:
El punto común entre Difer y Async es que pueden cargar archivos JS en paralelo y no bloquearán la carga de la página. La diferencia es que después de que se cargue la diferencia, JS esperará a que se cargue toda la página antes de ejecutar. Async ejecutará JS inmediatamente después de cargar. Por lo tanto, si hay un orden estricto de ejecución de JS, se recomienda utilizar el diferencial para cargar.
Lo anterior es una explicación detallada de la diferencia entre los atributos de Difer y Async en JS presentados por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!