$ (documento). listo (función () {}); vs script en la parte inferior de la página

Respuestas:

142

Muy poco en sí mismo, de cualquier manera, el DOM estará listo para que lo operes (estaba nervioso por eso hasta que leí esto de Google ). Si utiliza el truco del final de la página, es posible que su código se llame un poco antes, pero nada que importe. Pero lo que es más importante, esta elección se relaciona con el lugar donde enlaza su JavaScript en la página.

Si incluye su scriptetiqueta en heady confía en ready, el navegador encuentra su scriptetiqueta antes de mostrarle algo al usuario. En el curso normal de los eventos, el navegador se detiene bruscamente y va y descarga su script, enciende el intérprete de JavaScript y le entrega el script, luego espera mientras el intérprete procesa el script (y luego jQuery observa de varias maneras para que el DOM esté listo). (Digo "en el curso normal de las cosas" porque algunos navegadores admiten los atributos asyncodefer en las scriptetiquetas).

Si incluye su scriptetiqueta al final del bodyelemento, el navegador no hace todo eso hasta que su página ya se muestra en gran medida al usuario. Esto mejora el tiempo de carga percibido para su página.

Entonces, para obtener el mejor tiempo de carga percibido, coloque su script al final de la página. (Esta es también la pauta de la gente de Yahoo ). Y si vas a hacer eso, entonces no hay necesidad de usar ready, aunque por supuesto que podrías si quisieras.

Sin embargo, hay un precio para eso: debe asegurarse de que las cosas que el usuario puede ver estén listas para interactuar. Al mover el tiempo de descarga a después de que la página se muestra en gran medida, aumenta la posibilidad de que el usuario comience a interactuar con la página antes de que se cargue el script. Ese es uno de los argumentos en contra para poner a los que intentan hacer algo demasiado pronto, puede decirles eso o, mejor, poner en cola lo que querían hacer y hacerlo cuando su guión completo esté listo).script etiqueta al final. Con frecuencia no es un problema, pero tienes que mirar tu página para ver si lo es y, de ser así, cómo quieres lidiar con él. (Puede poner un pequeño elemento en línea script en el headque configura un controlador de eventos en todo el documento para hacer frente a esto. De esa manera, obtiene el tiempo de carga mejorado, pero si

TJ Crowder
fuente
17
+1. Otra forma de lidiar con la interacción antes de que se cargue el js es hacer que la página funcione sin javascript para empezar. Asegúrese de que todos los enlaces funcionen, etc., aunque, por supuesto, activarán una recarga de la página. Luego secuestra los enlaces y otras cosas con js, y agrega tu ajax u otras campanas y silbidos :)
Adrian Schmidt
1
¿Cómo manejarías poner en cola una acción? ¿Existe un patrón de diseño o alguna "solución común" que pueda considerar con respecto a esto?
HC_
@HC_: ¿Qué quieres decir con "poner en cola una acción"?
TJ Crowder
@TJCrowder De la última oración de su respuesta: "o, mejor, ponga en cola lo que querían hacer y hágalo cuando su script completo esté listo". Me estaba preguntando si hay formas "óptimas" de hacer esto, ya que estoy seguro de que podría encontrar "alguna" forma de hacerlo, pero estoy seguro de que sería ... mal visto si alguien más miró cualquier código involucrado.
HC_
2
@HC_: Nunca sentí la necesidad de hacerlo y no conozco ningún estándar en particular para ello. Y cinco años después, me parece que sería mejor simplemente ir con "Lo siento, cargando, un segundo ..." en su lugar. (Aunque si las cosas son que tarda en cargarse, tiene un problema más grande.) Si veo algo que creo que se puede hacer clic y clic en él, y no pasa nada, sólo Dios sabe lo que voy a hacer clic a continuación. Si los pone en cola y luego los reproduce cuando esté listo, podría ser ... menos que ideal.
TJ Crowder
3

Su página se cargará más lentamente al dispersar los $(document).ready()scripts en todo el DOM (en lugar de todos al final) porque requiere que jQuery se cargue primero sincrónicamente .

$ = jQuery. Por lo tanto, no puede usarlo $en sus scripts sin antes cargar jQuery. Este enfoque te obliga a cargar jQuery cerca del comienzo de la página, lo que detendrá la carga de tu página hasta que jQuery se descargue por completo.

Tampoco puede asynccargar jQuery porque en muchos casos, su $(document).ready()(s) script (s) intentarán ejecutarse antes de que jQuery esté completamente asincrónico y cause un error, porque nuevamente, $aún no está definido.

Dicho esto, hay una manera de engañar al sistema. Esencialmente, establecer $igual a una función que empuja $(document).ready()funciones a una cola / matriz. Luego, en la parte inferior de la página, cargue jQuery, luego itere a través de la cola y ejecute cada $(document).ready()uno a la vez. Esto le permite diferir jQuery al final de la página pero aún usar$ encima en el DOM. Personalmente no he probado qué tan bien funciona esto, pero la teoría es sólida. La idea ha existido por un tiempo, pero muy, muy pocas veces la he visto implementada. Pero parece una gran idea:

http://samsaffron.com/archive/2012/02/17/stop-paying-your-jquery-tax

Jake Wilson
fuente