¿"Poner Javascript en la parte inferior" vence el propósito de document.ready?

26

Sé que se recomienda poner Javascript en la parte inferior de la página, pero si estoy usando jQuery, ¿esto no frustra su propósito de ejecutarse mientras se carga el DOM?

Si tengo un menú desplegable, por ejemplo, los menús desplegables no se mostrarán hasta que se haya cargado todo el resto de la página. También trato de desarrollar con la mejora progresiva en mente, por lo que podría tener elementos que están ocultos con jQuery en lugar de CSS (para que los usuarios que no son JS puedan verlos).

¿Hay un medio feliz, tal vez?

javascript performance jquery Cabra descontento
fuente
Estoy teniendo el problema inverso. Tengo un script que crea y coloca una barra lateral, pero desafortunadamente la página se está procesando antes de que se ejecute mi script, lo que resulta en un tirón desagradable a medida que los elementos de la página se vuelven a dibujar en las nuevas ubicaciones. ¿Es posible bloquear el renderizado hasta que finalice mi script, o de lo contrario hacer que mi tamaño y posición se ejecuten antes del primer render?
3
¿Esta pregunta no pertenece más a StackOverflow?
Marco Demaio

Respuestas:

30

Document.ready espera a que se cargue el DOM antes de ejecutar JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).

La idea de ponerlo en la parte inferior significa que si su JS tiene problemas o si la persona tiene una conexión lenta, el resto de la página todavía se carga primero y no se "cuelga".

El JS todavía se ejecuta cuando todo se ha cargado, ya sea al principio o al final.

Callan
fuente
6

Poner javascript en la parte inferior significa que el otro contenido de la página (texto especialmente) se carga antes que javascript, por lo que los usuarios no esperan que se cargue el JS si tienen conexiones lentas.

Esto no afecta a document.ready, ya que se llama cuando el navegador ha terminado de preparar el DOM para una página. De cualquier manera, todo aún debe cargarse primero.

Macha
fuente
3

Un script no tiene uso real hasta que el HTML haya terminado de cargarse; un script no puede cambiar el DOM hasta que se haya cargado el HTML. document.readyespera a que se cargue el DOM. Por lo tanto, no tiene sentido retener cosas importantes como hojas de estilo.

Coloque las secuencias de comandos en la parte inferior de la página (antes de la </body>etiqueta) para ordenar que HTML y CSS lleguen al usuario lo más rápido posible. El navegador podrá procesar la página mucho más rápido y luego se pueden cargar los scripts, en lugar de dejar una página en blanco para que el usuario la mire mientras espera que se descarguen los scripts.

Mientras el navegador muestra progresivamente la página, si llega a una etiqueta de script (es decir, un archivo Javascript externo) todo se detiene . Las secuencias de comandos tienen el derecho de paso: mientras se descarga una secuencia de comandos, el navegador no iniciará ninguna otra descarga. es decir, las imágenes y hojas de estilo y cualquier otra descarga paralela se bloquearán, incluso en diferentes nombres de host.

La desventaja de poner scripts en la parte inferior de la página es que debido a que la página se renderizará antes de que los scripts se hayan inicializado, particularmente los que hacen clic rápidamente podrán interactuar con su sitio antes de que Javascript esté listo.

Nota: Lo contrario es cierto para las hojas de estilo: las hojas de estilo cerca de la parte inferior de la página bloquean la representación progresiva hasta que se hayan descargado todas las hojas de estilo y al moverlas al documento se HEADelimine el problema.

Hay un buen truco para cargar javascript sin hacer que el usuario espere, puede crear un <script/>elemento usando el createElement()método DOM y agregarlo a la página justo antes de la </body>etiqueta de cierre :

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

El navegador no comienza a descargar el script js hasta que el nuevo <script/>elemento se agrega realmente a la página. Una vez que se completa la descarga, el navegador interpreta el código Javascript que contiene.

Tom
fuente
1
No del todo cierto. El script puede alterar el DOM antes de que se cargue todo el HTML ... De hecho, es por eso que los scripts están bloqueando porque pueden alterar la página. Dicho esto, en muchos casos los desarrolladores no necesitan agregar su script de 'comportamiento' hasta que se carga el DOM.
scunliffe
1

Sí. Si coloca scripts en la parte inferior, ya no se necesita doc.ready( DOMContentLoadedevento): su script se ejecutará después de que se haya cargado todo el DOM anterior.

Dado que las secuencias de comandos al final mejoran el rendimiento (las secuencias de comandos no bloquean el análisis y la carga de CSS e imágenes), recomiendo colocar las secuencias de comandos en la parte inferior en lugar de usarlas doc.ready.

Kornel
fuente