Mueva jQuery al final de la etiqueta de cuerpo?

Question

Mi amigo leyó un artículo que menciona que mover todos los archivos de JavaScript al final de la etiqueta de cuerpo de cierre (</body>) mejorará el rendimiento de una página web.

he movido todos los archivos JS hasta el final, excepto el de los archivos JS, que está adjuntando caso a un elemento en la página, como a continuación y jQuery;

$(document).ready(function(){ 
    //submit data 
    $("#create_video").click(function(){ //... }); 
}); 

pero dice mover el archivo de la biblioteca jQuery al final de la etiqueta de cuerpo.

No creo que sea posible, porque estoy adjuntando muchos eventos a los elementos de la página cargados usando los selectores de jQuery, y para usar los selectores jQuery es necesario cargar primero la biblioteca jQuery.

¿Es posible mover archivo de biblioteca jQuery para el final de la página justo antes de cerrar la etiqueta del cuerpo (</body>) ??

Gracias

Answer 1

La función $(document).ready dice no funcione hasta que el DOM ha terminado de ser instanciado - por lo que después de moverlo cuerpo está bien siempre y cuando la biblioteca jQuery se carga por primera vez. Poco convencional y algunas suposiciones pueden no ser correctas, pero está bien.

Answer 2

Es una práctica estándar para mover todos sus js incluye a la parte inferior de la página. Esto se debe a que cuando un navegador carga el script, no genera un nuevo hilo para hacerlo, por lo que básicamente el navegador esperará hasta que cargue el script antes de pasar a la siguiente línea.

Lo que esto significa para sus usuarios es que verán una pantalla en blanco. Es mucho mejor que vean la página completa (ish) porque entonces no parece haberse estancado.

Answer 3

Solo tenga en cuenta que el archivo jQuery JavaScript debe cargarse antes de cualquier llamada a la función $(...).

Answer 4

el uso de JavaScript discreta (la adición de detectores de eventos a elementos en vez de onclik = "...", etc). Coloque todos sus archivos .js en la parte inferior de la etiqueta de cuerpo, con la biblioteca principal (jQuery en este caso) colocada primero, y todo estará bien. Puede utilizar un bundler como bundle fu

Usted verá un aumento considerable de rendimiento de la carga de la página.

Answer 5

Q - ¿Por qué puedo ver a menudo JavaScript escrito/incluyó antes del elemento de cuerpo de cierre en un documento (X) HTML?

A - No se puede acceder a los elementos DOM por JavaScript hasta que el navegador tenga cargó los elementos HTML en el DOM. Mediante la colocación de JavaScript al final de un documento (X) HTML (antes de la elemento del cuerpo de cierre), se asegurará de que la secuencia de comandos se llama tan pronto como el DOM se construye /cargado y listo para la manipulación . Una ventaja de este enfoque es que código JavaScript se ejecuta justo después del DOM es construido y posiblemente antes del evento onload dispararía.

principiantes JavaScript obtener disparado por esto constantemente mediante la colocación de código que manipula el DOM en el elemento de cabecera de un documento (X) HTML. Este provoca un error porque el DOM tiene aún no se ha construido y por lo tanto es aún no está accesible para JavaScript que atraviesa/manipula el DOM.

De JavaScript Execution & Onload Techniques in Web Browsers

Answer 6

La razón de que el artículo que usted pidió que mover secuencias de comandos en la parte inferior, es permitir que otros artefactos que se descargan en primer lugar. (css & imágenes, lo que acelerará los tiempos aparentes de representación)

Esto se debe a que HTTP 1.1 recomienda descargar solo 2 elementos por nombre de host. Y definitivamente querrías que tu archivo css fuera uno de los primeros archivos descargados, en lugar de javascript, lo que podría hacer que el sitio pareciera más lento (solo por el hecho de que el navegador aún no tiene el archivo css y no está seguro qué debería hacer con el html)

Pero si usaste google to host your jQuery, entonces eso se descargaría en paralelo y anularía cualquier razón para moverlo al final de tus páginas.

Como alternativa, puede configurar un segundo nombre de host para alojar contenido estático (como css/scripts/images).

Pero google ya ha hecho el trabajo duro por ti, por lo que tiene sentido usarlo si conviene. :-)

Answer 7

Utilice una "Cola lista para Dom" para recopilar las funciones que se ejecutarán una vez que se carga jQuery y el DOM está listo.

Ejemplo:

<html> 
    <head> 
    <script type="text/javascript"> 
     var domReadyQueue = []; 
    </script> 
    </head> 
    <body> 
    ... 
    <div class="foo"></div> 
    <script type="text/javascript"> 
    domReadyQueue.push(function($){ 
     $('.foo').doSomething(); 
    }) 
    </script> 
    ... 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script type="text/javascript"> 
    jQuery(function(){ 
     while (domReadyQueue.length) { 
     domReadyQueue.shift()(jQuery); 
     } 
    }); 
    </script> 
    </body> 
</html>