tag - script javascript html
etiquetas de script múltiples versus simples (4)
Algunos argumentan que es una buena práctica combinar todos los scripts en un solo bloque de scripts o un solo archivo de scripts, cargar solo el javascript que realmente se necesita y cargarlo lo más tarde posible para no ralentizar la renderización de html.
Aparte de eso, estoy seguro de que el uso de un solo bloque de scripts se carga más rápido que el uso de varios bloques de scripts, ya que deben evaluarse individualmente. Sin embargo, esta diferencia podría no ser reconocible.
¿Hay alguna diferencia (rendimiento, mejores prácticas, etc.) entre el uso de una sola etiqueta de script con código incrustado o el uso de varias etiquetas de script con el mismo código extendido en todo el HTML?
Por ejemplo:
<script>
foo();
</script>
...
<script>
bar();
</script>
versus:
<script>
foo();
bar();
</script>
Gracias
Con un guión en línea como el que citó, es poco probable que haya mucha diferencia; Sin embargo, cada vez que el analizador HTML del navegador encuentra una etiqueta de script , este:
- Se detiene bruscamente
- Construye una cadena del texto en la etiqueta hasta la primera vez que ve la cadena
"</script>" - Manos que envían mensajes de texto al intérprete de JavaScript, para escuchar el resultado, el intérprete lo envía cuando usted hace un
document.write - Espera a que el intérprete termine
- Inserta la salida acumulada recibida en la secuencia de análisis
- Continúa su análisis
Por lo tanto, aumentar la cantidad de veces que esta secuencia tiene que ocurrir puede, en teoría, aumentar el tiempo de carga de la página. También afecta el grado en que el analizador puede "mirar hacia adelante" en la secuencia de token, lo que puede hacerlo menos eficiente.
Todo esto suena realmente dramático, pero tendrías que perfilar una página real en los diferentes navegadores que te interesan para determinar si tuvo un impacto en el mundo real.
Entonces, en resumen, combínelos tanto como sea razonablemente posible. Si no puedes combinar razonablemente una pareja, no te preocupes demasiado hasta / a menos que veas un problema en el mundo real.
Lo anterior es para guiones en línea. Naturalmente, si tiene varias etiquetas de script referencia a un grupo de archivos JavaScript externos, también tendrá el problema de que cada uno de esos archivos debe descargarse, y el inicio de una solicitud HTTP es costoso (comparativamente) y por eso es mejor , a lo grande, para combinarlos en un solo archivo.
Algunas otras cosas a considerar:
- Tener muchas etiquetas de
scriptdispersas en su HTML puede dificultar el mantenimiento del script - Separar el HTML y la secuencia de comandos en archivos separados lo ayuda a limitar el grado en que están acoplados, lo que también ayuda al mantenimiento
- Al colocar la secuencia de comandos en un archivo separado, es posible ejecutar ese archivo a través de minificadores / compresores / empaquetadores, minimizar el tamaño de su código y eliminar comentarios, lo que le permite comentar en su código fuente sabiendo que esos comentarios serán privados.
- Si coloca sus scripts en archivos externos, tendrá la oportunidad de mantener los elementos separados por funcionalidad y luego combinarlos en un solo archivo para la página (comprimido / minificado / empaquetado) para una entrega eficiente al navegador.
Más:
En mi opinión, es mejor combinar tus scripts tanto como sea posible. Algunos navegadores tienen que pausar la representación mientras ejecutan bloques de script. Echa un vistazo a la respuesta en: Javascript Performance: múltiples bloques de scripts Vs bloque más grande
Hasta este momento, todo el código de JavaScript estaba en una etiqueta, esto no tiene que ser el caso.
Puede tener tantas etiquetas como quiera en un documento.
Las etiquetas se procesan a medida que se encuentran.
Espero que esto ayude.