Cómo implementar la sincronización, asincronía y carga diferida de JS
Esta vez le mostraré cómo implementar la sincronización JS, la carga asincrónica y retardada, y cuáles son las precauciones para implementar la sincronización JS, la carga asincrónica y retardada. El siguiente es un caso práctico, tomemos. una mirada.
Uno: carga sincrónica
El método más utilizado.
El modo síncrono, también conocido como modo de bloqueo, evitará que el navegador procese posteriormente y detendrá el análisis posterior. Sólo cuando se complete la carga actual se podrá realizar el siguiente paso. Por lo tanto, la ejecución sincrónica es segura de forma predeterminada. Pero si hay comportamientos como generar contenido de documento, modificar DOM, redirección, etc. en js, provocará congestión de la página. Por lo tanto, generalmente se recomienda colocar la etiqueta Nuevos atributos HTML5: atributos asíncronos y diferidos
El atributo diferido: aparece en IE4.0. No habrá modificaciones document.write y dom en el script de declaración de atributos diferidos. El navegador descargará otros scripts con atributos diferidos en paralelo. sin bloquear el procesamiento posterior de la página. Nota: Todos los scripts de aplazamiento deben ejecutarse en orden.
atributo async: nuevo atributo en HTML5. El script se ejecutará lo antes posible después de la descarga. La función es la misma que aplazar, pero no hay garantía de que el script se ejecute en orden. Se completarán antes del evento de carga.
Firefox 3.6, Opera 10.5, IE 9 y las últimas versiones de Chrome y Safari admiten el atributo async. Puede usar async y aplazar al mismo tiempo, de modo que todos los IE posteriores a IE 4 admitan la carga asincrónica.
Sin el atributo async, el script se obtendrá (descargará) y se ejecutará inmediatamente, bloqueando el procesamiento posterior del navegador. Si hay un atributo async, el script se descargará y ejecutará de forma asincrónica, mientras el navegador continúa con el procesamiento posterior.
Resumen: Para los navegadores que admiten HTML5, para implementar la carga asincrónica de JS, solo necesita agregar el atributo async al elemento script. Para ser compatible con versiones anteriores de IE, también debe hacerlo. agregue el atributo defer; para navegadores que no admiten HTML5. Los navegadores (IE se pueden implementar usando diferir) se pueden implementar usando los métodos anteriores.
El principio es básicamente escribir un script en el DOM o ejecutar código JS a través de la función eval. Puede ponerlo en una función anónima para ejecutarlo, o puede ejecutarlo en carga, también puede implementarlo mediante inyección XHR, o puede ejecutarlo. Puede crear un elemento iframe y luego ejecutar el código JS insertado en el iframe.
Tres: carga diferida
Algunos códigos JS deben usarse en determinadas situaciones, pero no cuando se inicializa la página. La carga diferida está diseñada para resolver este problema. Divida JS en muchos módulos Cuando se inicializa la página, solo se carga el JS que debe ejecutarse inmediatamente y luego la carga de otros JS se retrasa hasta que se necesita por primera vez. Similar a la carga diferida de imágenes.
La carga de JS se divide en dos partes: descarga y ejecución. La carga asincrónica solo resuelve el problema de la descarga, pero el código se ejecutará inmediatamente después de que se complete la descarga. Durante el proceso de ejecución, el navegador se bloquea y no puede responder a ninguna necesidad.
Solución: para resolver el problema de la carga retrasada de JS, puede utilizar la carga asincrónica para almacenarlo en caché, pero no ejecutarlo inmediatamente, sino ejecutarlo cuando sea necesario. ¿Cómo almacenarlo en caché? Cargue y almacene en caché el contenido JS como un objeto Imagen u Objeto, por lo que no se ejecutará inmediatamente y luego se ejecutará cuando sea necesario por primera vez.
1: Simule un tiempo de descarga prolongado:
Utilice el hilo para dormir durante un período de tiempo mientras realiza la operación de descarga.
2: Simula un tiempo de ejecución de código JS largo
var start = Number(new Date());
while(start + 5000 > Number( new Date ())){//Ejecutar JS} ¡Este código hará que JS se ejecute durante 5 segundos para completarse!
Mecanismo de carga diferida de JS (LazyLoad): en pocas palabras, activa funciones relacionadas cuando el navegador se desplaza a una determinada posición para cargar elementos de la página o ejecutar determinadas acciones. ¿Cómo detectar la posición de desplazamiento del navegador? Se puede implementar mediante un temporizador y se puede determinar si la función debe ejecutarse comparando la posición del nodo de destino de la página y la altura de la barra de desplazamiento del navegador en un momento determinado.
Creo que domina el método después de leer el caso de este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.
Lectura recomendada:
Cuáles son las formas de automatizar formularios Vue
Cómo hacer un reproductor de música con vue-element