1. Inicio
  2. Pregunta y respuesta
  3. JavaScript: eventos de carga DOM, secuencia de ejecución y $ (documento) .ready()

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

2009-08-20 21 views
55

Me acabo de dar cuenta de que carezco del conocimiento fundamental de lo que ocurre 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>

Estas son las preguntas que tengo:

  1. qué secuencia están sucediendo cosas en? 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 importar el DOM)? Sé que los scripts están cargados en orden.

  2. ¿Dónde encaja $(document).ready()? En la pestaña Red de Firebug veo el evento DOMContentLoaded y el evento 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").

  3. ¿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?

  4. 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 el bloque de código en línea)? ¿Cómo puedo evitar este escenario?

Quiero undestand el panorama general de lo que sucede cuando y lo que depende de lo que (en su caso).

Fuente

2009-08-20 montrealist

Respuesta

36

Javascript se ejecuta como se ve.Generalmente, 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 ahora inusual caso 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 publicado, e IE por lo menos admite un atributo defer en la etiqueta <script> que pospondrá la carga del script hasta que se cargue la página.

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 antigua normal onload.

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

Fuente

2009-08-20 18:26:03 Eevee

+0

Muy interesante. Gracias por la perspectiva de futuro! – montrealist

+0

En realidad, si bien las secuencias de comandos de la parte inferior son útiles, aún deben ejecutarse antes de que se cargue la página. Cargarlos de forma asincrónica es mucho mejor, lo que significa que incluso si los coloca en la parte superior, el navegador seguirá analizando la página y cargando el script en paralelo. El único problema es que ya no sabrá en qué orden se ejecutan los scripts. – Jens

+0

Probé una página aspx en IE9 (emulada desde herramientas de desarrollador) con scripts movidos desde el comienzo de hasta el final de , y encontré que los tiempos de carga eran más rápidos cuando los scripts estaban dentro de la cabecera. grabó los videos de carga para medir la experiencia del usuario. Ningún ganador claro para mí – mishal153

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

Fuente

2009-08-20 18:18:38 Zoidberg

4

http://javascript.about.com/od/hintsandtips/a/exeorder.htm debería ayudar a responder a esa

básicamente: primero todos los datos se carga (el HTML), a continuación, el js el código 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 scripts 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.

así @ 4: usted no necesita para evitar que scenarion porque first.js siempre se está leyendo/otorgada ante last.js

Fuente

2009-08-20 18:21:11 Niko

Cuestiones relacionadas

 Cuestiones relacionadas