javascript - script - use js file in html
JavaScript discreto:<script> en la parte superior o inferior del código HTML? (7)
Como han dicho otros, colóquelo antes de las etiquetas html del cuerpo de cierre.
El otro día recibimos numerosas llamadas de clientes quejándose de que sus sitios eran extremadamente lentos. Los visitamos localmente y descubrimos que tardaron entre 20 y 30 segundos en cargar una página. Pensando que los servidores funcionaban mal, iniciamos sesión, pero los servidores web y sql tenían una actividad de ~ 0%.
Después de unos minutos, nos dimos cuenta de que un sitio externo no funcionaba, al que estábamos enlazando para las etiquetas de seguimiento de Javascript. Esto significaba que los navegadores estaban presionando la etiqueta del script en la sección principal del sitio y esperando para descargar el archivo del script.
Por lo tanto, para scripts de terceros / externos al menos, recomiendo ponerlos como lo último en la página. Entonces, si no estaban disponibles, el navegador al menos cargaría la página hasta ese punto, y el usuario no se daría cuenta de ello.
Recientemente leí el manifiesto de Yahoo sobre Mejores prácticas para acelerar su sitio web . Recomiendan poner la inclusión de JavaScript en la parte inferior del código HTML cuando podamos.
¿Pero dónde exactamente y cuándo?
¿Deberíamos colocarlo antes de cerrar </html> o después? Y, sobre todo, ¿cuándo deberíamos ponerlo en la sección <head> ?
Hay dos posibilidades para los scripts verdaderamente discretos:
- incluyendo un archivo de script externo a través de una etiqueta de script en la sección principal
- incluyendo un archivo de script externo a través de una etiqueta de script en la parte inferior del cuerpo (antes de
</body></html>)
El segundo puede ser más rápido ya que la investigación original de Yahoo mostró que algunos navegadores intentan cargar archivos de script cuando golpean la etiqueta del script y, por lo tanto, no cargan el resto de la página hasta que hayan terminado. Sin embargo, si su script tiene una porción ''lista'' que debe ejecutarse tan pronto como el DOM esté listo, es posible que deba tenerlo en la cabeza. Otro problema es el diseño: si el script va a cambiar el diseño de la página, querrá que se cargue lo antes posible para que su página no se demore en volver a dibujarse frente a sus usuarios.
Si el sitio de script externo está en otro dominio (como widgets externos), puede valer la pena colocarlo en la parte inferior para evitar que se demore la carga de la página.
Y para cualquier problema de rendimiento, haga sus propios puntos de referencia : lo que puede ser cierto al mismo tiempo cuando se realiza un estudio puede cambiar con su propia configuración local o cambios en los navegadores.
No, no debería ser después del </html> porque eso sería inválido. El mejor lugar para colocar guiones es justo antes del </body>
Esto es básicamente porque la mayoría de los navegadores dejan de renderizar la página mientras evalúan el script que usted proporciona. Así que está bien poner código que no sea de bloqueo en cualquier lugar de la página (estoy pensando principalmente en cosas que unen funciones al evento onLoad , ya que el enlace de eventos es tan rápido que efectivamente es gratis). Un gran asesino aquí es al comienzo de la página al colocar una secuencia de comandos del servidor de anuncios, que puede evitar que la página se cargue antes de que los anuncios se hayan descargado por completo, lo que hace que la carga de su página se multiplique.
Nunca es tan cortante y seco: Yahoo recomienda colocar los scripts justo antes de la etiqueta de cierre </body> , lo que creará la ilusión de que la página se carga más rápido en un caché vacío (ya que los scripts no bloquearán la descarga del resto del documento) ) Sin embargo, si tiene algún código que desea ejecutar en la carga de la página, solo comenzará a ejecutarse después de que se haya cargado toda la página. Si coloca las secuencias de comandos en la etiqueta <head> , comenzarían a ejecutarse antes, por lo que en una caché preparada la página parecería cargar más rápido.
Además, el privilegio de colocar guiones en la parte inferior de la página no siempre está disponible. Si necesita incluir scripts en línea en sus vistas que dependen de una biblioteca o de algún otro código JavaScript que se cargue antes, debe cargar esas dependencias en la etiqueta <head> .
En general, las recomendaciones de Yahoo son interesantes, pero no siempre son aplicables, y deben considerarse caso por caso.
Para resumir, basado en las sugerencias anteriores:
- Para scripts externos (Google Analytics, seguidores de marketing de terceros, etc.) colóquelos antes de la etiqueta
</body>. - Para los scripts que afectan el diseño de la página, colóquelos en la cabecera.
- Para las secuencias de comandos que se basan en ''dom ready'' (como jquery), considere colocar antes de
</body>menos que tenga una razón de mayúsculas para colocar las secuencias de comandos en la cabeza. - Si hay scripts en línea con dependencias, coloque los scripts necesarios en la cabecera.
Si lo pones en la parte inferior, carga el último, por lo tanto, acelera la velocidad para que el usuario pueda ver la página. No necesita estar antes del </html> final, aunque de lo contrario no será parte del DOM.
Sin embargo, si el código es necesario al instante, póngalo en la cabeza.
Lo mejor es poner cosas como widgets de blog en la parte inferior para que, si no se cargan, no afecte la usabilidad de la página.
Si quiere jugar con la posición de sus guiones, YSlow es una gran herramienta para darle un sabor si va a mejorar o perjudicar el rendimiento. Poner javascript en ciertas posiciones de documento realmente puede matar los tiempos de carga de la página.