javascript/jquery - $ (document) .ready() y ubicaciones de script

Question

Me gustaría saber cómo funciona $(document).ready(), junto con los scripts en general. Supongamos que tengo scripts que se encuentran en la parte inferior de la página (por motivos de rendimiento, ¿me lo han dicho?). Como ejemplo: supongamos que tiene un enlace y debe evitar su acción predeterminada (preventDefault()). Si el script está en la parte inferior de la página, ¿no es posible que el usuario pueda ver la página y hacer clic en el enlace antes de que el navegador sepa que no debe seguir el enlace?

Answer 1

Los scripts en la sección 'cabezales' se evalúan en el punto donde se carga la etiqueta del script en el navegador (es decir, antes del cuerpo). Las etiquetas de scripts al final del documento también se ejecutan cuando el navegador las encuentra mientras analiza la página, por lo que antes del evento 'document ready'. El evento 'document ready' se activa cuando se carga la página completa, es decir, cuando el navegador analiza la etiqueta de cierre '</html>'.

Así que sí, si lleva un tiempo cargar y ejecutar un script que deshabilita los enlaces al final del documento, el usuario podría hacer clic en un enlace mientras tanto.

Una opción es operar en reversa, es decir, cargar la página con enlaces deshabilitados, y tener su javascript habilitado. O bien, use 'live' o 'delegate' en los scripts en la parte superior (después de cargar jquery) para que los enlaces se vean afectados a medida que se crean.

Mire here para ver algunas complejidades con respecto a cómo los navegadores manejan scripts cargados dinámicamente de forma ligeramente diferente.

Answer 2

Yahoo recomienda poner todos los scripts al final de su documento para un rendimiento - http://developer.yahoo.com/performance/rules.html

pero como se puede leer en la documentación, $(document).ready()

especificar la función que se ejecutará cuando el DOM está totalmente cargado .

con eso dicho, no creo que realmente tenga que preocuparse por $(document).ready().

Supongo que $(document).ready() que se pone en la parte inferior simplemente fallará si la conexión a Internet es tan lenta. No puedo pensar en ninguna otra situación para que eso falle.

Answer 3

Si el script se encuentra en la parte inferior de la página , no es posible que el usuario pueda ver la página y haga clic en el enlace antes de que el navegador no sabe seguir el enlace?

En mi experiencia, sí es posible. Me encontré con esto al diseñar una tabla con colores impares/pares desde document.ready() (la representación en el servidor es mejor, lo sé). Con la secuencia de comandos en la parte superior, la pantalla era perfecta. Con el script en la parte inferior, a veces hubo un retraso notable entre la carga de la página HTML y la representación de las filas. Esto es con una pequeña mesa también.

La razón por la que se recomienda que coloque scripts en la parte inferior es la forma en que funciona la carga de scripts en HTML. Cada vez que el navegador golpea una etiqueta <script>, la carga de la página se detiene hasta que esa secuencia de comandos se carga (o se recupera de la memoria caché). Si ese script está en la parte inferior, la página ya está cargada para que el usuario pueda ver algo. Si el script está en la parte superior, el usuario verá una página en blanco hasta que se cargue el script.

Normalmente, tales retrasos son irrelevantes, pero a veces lo son. Además, como en mi ejemplo, si su Javascript tiene efectos visuales, puede ser una mejor experiencia de usuario para no renderizar la página y luego cambiarla.

Answer 4

Sí, esto es posible, pero poco común en la práctica. $(document).ready() se une al evento dom: loaded que se activa después de que se haya creado dom, pero antes de que se obtengan todos los recursos. Si está haciendo algo que lleva mucho tiempo en $ (documento) listo, es posible que el usuario tenga una ventana, aunque estrecha, para usar los elementos independientes.

. Listo incluso se dispara antes de que se cargue css, por lo que si puede ver su página antes de su estilo, esa es su ventana para usar sus eventos ilimitados. Por esa razón, debe colocar cualquier código que necesite propiedades CSS o dimensión de imagen en una función $ (documento) .load (...).

Answer 5

desea adjuntar un 'return false' para el evento onclick:

<a href="http://www.google.com" onclick="return false;">Google</a> 

de los nazis usabilidad le dirá que eso es malo porque la gente no puede seguir los enlaces si no tienen Javascript.

digo, es mejor no utilizar etiquetas 'A' si usted no está realmente querer vincular a las personas en cualquier lugar :)

<span style="cursor:pointer;text-decoration:underline">Google</span> 

puede tener el mismo efecto.

Answer 6

Acepto que esto es posible, pero si el sitio está construido desde una perspectiva progressive enhancement, eso no debería ser un problema. Si un usuario tiene JavaScript desactivado (¿por qué harían eso?!?!?) O un navegador anterior que no admite algo que su script está haciendo, entonces ese enlace es la única forma que tienen de acceder al contenido.

Así que si el usuario hace clic en el enlace en ese medio segundo o más antes de que se carguen las secuencias de comandos, entonces todavía pueden funcionar. Si esperan hasta que la página se cargue por completo, los scripts se activan y el clic del enlace muestra un cuadro de diálogo modal en lugar de navegar. De cualquier manera, el usuario obtiene el contenido.