it-swarm-es.com

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

Sé que se recomienda poner Javascript en la parte inferior de la página, pero si estoy usando jQuery, ¿no frustra esto 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 una 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?

26
DisgruntledGoat

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.

30
Callan

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.

6
Macha

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.ready espera 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 etiqueta </body>) 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 alcanza 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 las 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, los clics especialmente rápidos podrán interactuar con su sitio antes de que el 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 las muevan al documento HEAD elimina el problema.


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

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 elemento <script/> realmente se agrega a la página. Una vez que se completa la descarga, el navegador interpreta el código Javascript que contiene.

3
Tom

Sí. Si coloca scripts en la parte inferior, doc.ready (DOMContentLoaded event) ya no es necesario: 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 de HTML y la carga de CSS e imágenes), recomiendo colocar las secuencias de comandos en la parte inferior en lugar de usar doc.ready.

1
Kornel