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 </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 HEAD
elimine 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.