pagina - JavaScript: eventos de carga DOM, secuencia de ejecución y $(documento).ready()

jquery cargar pagina (3)

Me acabo de dar cuenta de que carezco del conocimiento fundamental de lo que sucede exactamente cuando una página se carga en un navegador.

Supongamos que tengo una estructura como esta:

<head> <script src="jquery.js" type="text/javascript"></script> <script src="first.js" type="text/javascript"></script> </head> <body> ... <script type="text/javascript" id="middle"> // some more JS here... </script> ... <script src="last.js" type="text/javascript"></script> </body>

Aquí están las preguntas que tengo:

¿En qué secuencia están sucediendo las cosas? Primero, el DOM luego se ejecuta el JS, ¿es viceversa, o es simultáneo (o tan pronto como los archivos JS finalizan la descarga, sin tener en cuenta el DOM)? Sé que los scripts están cargados en orden.
¿Dónde encaja $(document).ready() ? En la pestaña Red de Firebug, veo el evento DOMContentLoaded y el evento de load . ¿Se activa $(document).ready() cuando se desencadena el evento DOMContentLoaded ? No se pudo encontrar ninguna información concreta sobre esto (todos simplemente mencionan "cuando se carga el DOM").
¿Qué significa exactamente "cuando se carga el DOM"? ¿Que todo el HTML / JS ha sido descargado y analizado por el navegador? ¿O solo el HTML?
¿Es posible la siguiente situación: hay un $(document).ready() que llama al código en last.js , pero se ejecuta antes de que last.js se haya cargado? ¿Dónde sería más probable (en first.js o en el bloque de código en línea)? ¿Cómo puedo prevenir este escenario?

Quiero entender la gran imagen de lo que sucede cuando y qué depende de qué (si es que lo hace).

Todo el script incluye pasar para que aparezcan en html, se cargan cuando se analiza el html.
Significa que TODOS los objetos dom han sido cargados, y todos incluyen scripts y css. (Las imágenes tal vez aún no).
ver 2.
$ (document) .ready () solo recibe una llamada una vez que se cargan todas las secuencias de comandos y los objetos dom, debe estar bien.

Javascript se ejecuta como se ve. Normalmente , el navegador detiene el análisis de la página tan pronto como ve una etiqueta <script> , descarga y ejecuta el script, y luego continúa. Esta es la razón por la que comúnmente se recomienda poner etiquetas <script> en la parte inferior: para que el usuario no tenga una página en blanco mientras el navegador espera la descarga de las secuencias de comandos.

Sin embargo, a partir de Firefox 3.5, los scripts se descargan en segundo plano mientras se procesa el resto de la página. En el caso ahora inusual de que el script use document.write o similar, Firefox realizará una copia de seguridad y volverá a dibujar según sea necesario. No creo que otros navegadores hagan esto en este momento, pero no me sorprendería si fuera inminente, e IE al menos admite un atributo de defer en la etiqueta <script> que demorará la carga del script hasta después de que la página esté cargado.

DOMContentLoaded es exactamente eso: se dispara tan pronto como se carga el DOM. Es decir, tan pronto como el navegador haya analizado todo el HTML y haya creado un árbol interno. NO espera a que se carguen imágenes, CSS, etc. El DOM es todo lo que normalmente necesita para ejecutar el Javascript que desee, por lo que es bueno no tener que esperar por otros recursos. Sin embargo, creo que solo Firefox admite DOMContentLoaded ; en otros navegadores, ready() solo adjuntará un evento a la onload normal onload .

Se garantiza que JavaScript se ejecute en el orden en que aparece en tu HTML, así que asegúrate de que tu función esté definida antes de intentar adjuntarla a un evento.

http://javascript.about.com/od/hintsandtips/a/exeorder.htm debería ayudarte a responder eso

básicamente: primero se cargan todos los datos (el html), luego el código js dentro de la cabeza / cuerpo que no está en una función o listo o algo así se ejecuta primero. a partir de ahí se trata de los guiones secuencialmente

es importante tener en cuenta que js tiene prioridad sobre es decir. carga css - para formar una perspectiva de rendimiento, debe tener el js en la parte inferior de la página.

entonces @ 4: no es necesario que evites ese escenario porque first.js siempre se lee / ejecuta antes de last.js