Cómo implementar la sincronización, la asincronía y la carga diferida de JS
Uno: Carga sincrónica
El método que más utilizamos habitualmente.
El modo síncrono también se denomina modo de bloqueo, lo que evitará que el navegador procese posteriormente y detendrá el análisis posterior. Sólo después de que se complete la carga actual podrá continuar con el siguiente paso. Es por eso que la ejecución sincrónica es segura de forma predeterminada. Sin embargo, si js genera contenido del documento, modifica dom, redirecciona, etc., provocará el bloqueo de la página. Por lo tanto, generalmente se recomienda colocar la etiqueta Nuevos atributos HTML5: atributos asíncronos y diferidos
Atributo diferido: apareció en IE 4.0. El atributo defer declara que no habrá modificaciones document.write o dom en el script. El navegador descargará otros scripts con el atributo defer en paralelo sin bloquear el procesamiento posterior de la página. Nota: Todos los scripts a los que se hace referencia deben ejecutarse en orden.
atributo async: Nuevo atributo HTML5. El script se ejecutará inmediatamente después de la descarga, lo que tiene el mismo efecto 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.
Si no utiliza el atributo async, el script se buscará (descargará) y ejecutará inmediatamente, evitando al mismo tiempo el procesamiento posterior por parte del navegador. Usando el atributo async, el script se descargará y ejecutará de forma asincrónica, mientras el navegador continuará procesándolo.
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 necesita hacerlo. agregue el atributo de aplazar para navegadores que no admiten HTML5 (IE se puede implementar usando aplazar), lo que se puede lograr utilizando el método anterior. El principio es básicamente escribir el script en el DOM o ejecutar el código JS a través de la función eval. Puede ejecutarlo en una función anónima, en carga, o mediante inyección XHR, o 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 circunstancias específicas en lugar de 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 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 bloqueará y no responderá a ninguna demanda.
Solución: para resolver el problema de la carga diferida de JS, puede utilizar la carga asincrónica para almacenarlo en caché, pero no ejecutarlo inmediatamente, sino ejecutarlo cuando sea necesario. ¿Cómo almacenar en caché? Cargue y almacene en caché el contenido JS como una imagen u objeto para que no se ejecute inmediatamente y luego se ejecute tan pronto como sea necesario.
1: Simule un tiempo de descarga prolongado:
Utilice el hilo para dormir durante un período de tiempo antes de realizar la operación de descarga.
2: Simula un tiempo de ejecución de código JS más largo
var start = Número(nueva fecha());
while(inicio + 5000 > Número( nueva fecha ())){//ejecutar JS} ¡Este código tardará 5 segundos en ejecutar JS!
Mecanismo de carga diferida de JS (LazyLoad): en pocas palabras, activa una función cuando el navegador se desplaza a una determinada posición para cargar elementos de la página o realizar determinadas operaciones. ¿Cómo implementar la detección de 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 este método después de leer este artículo. Para obtener más información interesante, preste atención a otros artículos relacionados de Gxl net.
Lectura recomendada:
Cuáles son los métodos para automatizar formularios vue
Cómo usar vue-element para crear un reproductor de música