javascript - tag - ¿Poner los scripts en la parte inferior de una página web acelera la carga de la página?
script type= text/javascript src= (8)
Hay algunos puntos.
Carga la página rápidamente ya que el JavaScript interno o externo está en la parte inferior.
Si no ha utilizado un método onLoad de ventana en JavaScript, comenzará la ejecución tan pronto como se haya procesado. La secuencia de comandos en la parte inferior garantiza que su secuencia de comandos se ejecutará después de cargar la página.
Si la secuencia de comandos es como un archivo significa externo, se procesará después de la imagen HTML y otro objeto visual que forma la vista de la página.
Si está usando FireFox, entonces hay un complemento para verificar el rendimiento. Por favor, haga clic en el sitio de Firefox para este complemento.
Las mejores prácticas de Yahoo establecen que poner los archivos JavaScript en la parte inferior puede hacer que sus páginas se carguen más rápido. ¿Cuál es la experiencia con esto? ¿Cuáles son los efectos secundarios, si los hay?
Ponerlos en la parte inferior es casi equivalente a usar el atributo "defer" (incluso más información here ). Esto es similar a cómo un navegador no puede continuar con el diseño de la página a menos que las etiquetas IMG tengan información de ancho y alto. Si el javascript incluido genera contenido, entonces el navegador no puede continuar con el diseño hasta que sepa qué hay y qué tan grande es todo. .
Siempre que su javascript no tenga que ejecutarse antes de que ocurra el evento onload, debería poder colocar las etiquetas de script al final o usar el atributo de aplazamiento.
Por lo que puedo decir, simplemente permite que el navegador comience a renderizarse antes.
Si está desarrollando para Firefox / Safari, siempre puede consultar con la consola de desarrollador / firebug ya que muestran la secuencia de carga de archivos.
Si obtiene una copia de Visual Round Trip Analyzer de Microsoft, puede perfilar exactamente lo que está sucediendo.
Lo que he visto con más frecuencia es que la mayoría de los navegadores DETENEN las solicitudes de PIPELINACIÓN cuando encuentran un archivo JavaScript y dedican toda su conexión a descargar el archivo único, en lugar de descargarlo en paralelo.
La razón por la cual se detiene la canalización es para permitir la inclusión inmediata de la secuencia de comandos en la página. Históricamente, muchos sitios solían usar document.write para agregar contenido, y la descarga de la secuencia de comandos permitía una experiencia un poco más transparente.
Este es ciertamente el comportamiento contra el cual Yahoo está optimizando. (He visto la misma recomendación en la revista MSDN con la explicación anterior).
Es importante tener en cuenta que es menos probable que IE 7+ y FF 3+ muestren el mal comportamiento. (En su mayor parte, ya que el uso de document.write ha quedado fuera de práctica, y ahora hay mejores métodos para pre-renderizar contenido)
Tiene un par de ventajas:
La representación comienza antes. El navegador no puede diseñar elementos que aún no ha recibido. Esto evita el problema de la "pantalla blanca en blanco".
Aplaza los límites de conexión. Por lo general, su navegador no intentará realizar más de un par de conexiones al mismo servidor a la vez. Si tiene toda una cola de secuencias de comandos esperando a ser descargadas desde un servidor lento, realmente puede arruinar la experiencia del usuario ya que su página parece detenerse.
Un efecto secundario sería que algunos scripts no funcionan en absoluto si los coloca al final de la página. Si hay una secuencia de comandos ejecutándose mientras la página se procesa (bastante común para las secuencias de comandos de anuncios, por ejemplo) que se basa en una función en otra secuencia de comandos, esa secuencia de comandos debe cargarse primero.
Además, decir que la página se carga más rápido no es la verdad exacta. Lo que realmente hace es cargar los elementos visuales de la página antes para que parezca que tu página se carga más rápido. El tiempo total para cargar todos los componentes de la página sigue siendo el mismo.
Tu página debería cargarse más rápido. Los navegadores abrirán más de una conexión para descargar tres imágenes en paralelo, por ejemplo. Por otro lado, las etiquetas <script> en la mayoría de los navegadores hacen que el navegador se bloquee en la ejecución de ese script. Si es una etiqueta <script> con un atributo src, el navegador bloqueará tanto la descarga como la ejecución. Si coloca sus etiquetas <script> al final, evitará este problema.
Al mismo tiempo, esto significa que esas páginas no tienen ninguna funcionalidad JS hasta que terminen de cargarse. Un buen ejercicio de accesibilidad es asegurarse de que su sitio funcione lo suficientemente bien como para poder utilizarlo hasta que se cargue el JS. Esto garantiza que la página (a) funcione bien para las personas con conexiones lentas (b) que funcione bien para las personas con discapacidades o que usen navegadores de solo texto.