Línea de tiempo JS del flujo de ejecución de Dom; diferir y asíncrono

Línea de tiempo de flujo de ejecución Dom JS

1. Cree un objeto Documento y comience a analizar la página web. Analizar elementos HTML y texto. Esta etapa document.readyState = 'cargando'

2. Encuentro css externo de enlace, cree un hilo para cargar y continúe analizando el documento.

3. Encuentro JS externo de secuencia de comandos, no configuró asíncrono, aplazó, cargó el navegador, bloqueó, esperó la carga y luego analizó el documento

4. Encuentra script JS externo y establece asíncrono, difiere, el navegador crea un hilo para cargar, continúa analizando el documento

   • async se ejecuta después de cargar

   • Después de analizar el aplazamiento html, la secuencia de introducción se ejecuta secuencialmente.

   • Prohibir el uso de document.write Ps en el script: borrará la secuencia del documento

5. Al encontrar img, etc., los detalles normales de la estructura dom son primero, luego el navegador carga el src de forma asincrónica y continúa analizando el documento

6. Cuando se analiza el documento, document.readyState = 'interactive'

7. Después de analizar el documento, todos los scripts con aplazamiento se ejecutarán en el orden de introducción;

8. El objeto de documento desencadena el evento DOMContentLoaded, que también marca la ejecución del programa desde la etapa de ejecución del script de sincronización hasta la etapa controlada por el evento. Es decir, se aceptan eventos como clics.

9. Cuando se cargan y ejecutan todos los scripts asíncronos, y se cargan img, etc., document.readyState = complete desencadena el evento de carga.

10. A partir de ese momento, la entrada del usuario, los eventos de red, etc. se manejan en una respuesta asincrónica.