javascript - habilitar - Aplazar los scripts y el orden de ejecución en los navegadores
enable javascript chrome (2)
He estado trabajando en agregar un atributo de aplazamiento para los scripts externos utilizados en la sección HEAD de uno de mis proyectos. Tuve una consulta sobre el orden de ejecución de varias etiquetas de script aplazadas.
A continuación están mis observaciones que nos ayudarán a entender mejor mi consulta:
Según http://www.w3.org/TR/html5/scripting-1.html
el atributo de aplazamiento está presente, luego el script se ejecuta cuando la página ha terminado de analizar
El atributo de aplazamiento funciona. Pero, tengo dudas sobre la orden de ejecución. Parece que es diferente en FF y Chrome.
Según mi proyecto:
<script defer="defer" src="{SERVER_PATH}/deps.js?1441452359"></script>
<script defer="defer" src="{SERVER_PATH}/script1.js?1440067073"></script>
<script defer="defer" src="{SERVER_PATH}/script2.js?1441451916"></script>
Aquí, deps.js es un archivo enorme de alrededor de 120kb (gzipped), mientras que, script1-3 son de un tamaño regular de 20-50kb (gzipped).
En Firefox, la ejecución del script diferido comienza en orden de aparición, pero no se completa en el mismo orden. Donde, en Chrome, a menos que la secuencia de comandos anterior complete la ejecución, la ejecución de la siguiente secuencia de comandos no comienza. Parece que Chrome tiene sentido.
Para probar el orden de ejecución, inserté console.log en la primera y última línea de cada script, por ejemplo, en deps.js
console.log("Execution Start: deps");
// minified deps script content.
console.log("Execution End: deps");
Debajo de la salida de la consola en Firefox:
Execution Start: deps
Execution Start: script1
Execution Start: script2
// Script Error as script1 needs deps to render completely.
// Script Error as script2 needs deps to render completely.
Execution End: deps
Debajo de la salida de la consola en Chrome:
Execution Start: deps
Execution End: deps
Execution Start: script1
Execution End: script1
Execution Start: script2
Execution End: script2
Sin embargo, el comportamiento en FF no siempre es como se muestra arriba. A veces funciona como Chrome. Parece un problema que es solo para Firefox. O bien, puede deberse a que el archivo deps.js sea pesado y esté minificado y se demore en procesarlo.
¿Puede alguien de experiencia similar con diferir ayudarme? Por favor, hágamelo saber si se necesita alguna otra información.
PD: Otras soluciones como, mover los scripts al final de la página no es algo que esté viendo en este momento.
Diría que no es realmente posible a menos que el registro de "Fin de ejecución" ocurra en un bucle de eventos diferente al de "Inicio de ejecución".
¿Puedes asegurarnos de eso? Como de otra manera, significará que Firefix hace algo de subprocesamiento múltiple aquí, y como sabemos, no hay soporte en JS para eso.
La especificación HTML5.0 dice esto:
Si el elemento tiene un atributo src, y el elemento tiene un atributo de aplazamiento, y el elemento se ha marcado como "insertado en el analizador", y el elemento no tiene un atributo asíncrono
El elemento debe agregarse al final de la lista de scripts que se ejecutarán cuando el documento haya terminado de analizar asociado con el documento del analizador que creó el elemento.
La tarea que el origen de la tarea de red coloca en la cola de tareas una vez que el algoritmo de recuperación ha finalizado debe establecer el indicador "listo para ser ejecutado por el analizador" del elemento. El analizador se encargará de ejecutar el script.
Así que dice que difiere la ejecución del script hasta que se analiza el Document asociado, y también dice que está incluido en la lista. Por lo tanto, el orden de la lista debe ser el orden del guión que se está analizando y insertando.
Sin embargo, la segunda parte me preocupa. Básicamente dice que solo se marcará para su ejecución hasta que la tarea de la red termine de descargar el script. Luego ... "el analizador se encargará de ejecutar el script".
Lo que no pude encontrar en la especificación es el caso que cubre la ejecución del script después del análisis del documento. ¿Sigue ejecutando los scripts en el orden de la lista a medida que se "preparan para ser ejecutado por el analizador"? O esperará hasta que todos los scripts en la lista estén "listos para ejecutarse por el analizador" y luego los ejecuten.
Especificaciones (paso 15): http://www.w3.org/TR/html5/scripting-1.html#script-processing-src-prepare