etiquetas de script múltiples versus únicas

Question

¿Existe alguna diferencia (rendimiento, mejores prácticas, etc.) entre utilizar una sola etiqueta de script con código incrustado o usar varias etiquetas de script con el mismo código extendido en todo el HTML?

Por ejemplo:

<script> 
    foo(); 
</script> 
... 
<script> 
    bar(); 
</script> 

frente:

<script> 
    foo(); 
    bar(); 
</script> 

Gracias

Answer 1

Con línea guión como lo que usted ha citado, no es improbable que sea mucha diferencia; Sin embargo, cada vez que analizador HTML del navegador se encuentra con un script etiqueta, que:

• Viene a un alto
• acumula una cadena de texto en la etiqueta hasta la primera vez que ve la cadena "</script>"
• Manos que el texto fuera a la intérprete de JavaScript, escuchando para la salida del intérprete envía cuando se hace una document.write
• espera a que el intérprete para terminar
• Inserta la salida acumulada recibida en la corriente de análisis sintáctico
• continúa su análisis

lo tanto aumentar el número 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 lo cual suena realmente dramático, pero tendría que crear un perfil de una página real en los diferentes navegadores que le interesan para determinar si tuvo un impacto en el mundo real.

Por lo tanto, en resumen, combínelas 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 la secuencia de comandos en línea. Naturalmente, si tiene varias etiquetas script que hacen referencia a un grupo de archivos JavaScript externos, también tendrá el problema de que cada uno de esos archivos debe descargarse e iniciar una solicitud HTTP es algo caro (comparativamente) y por eso es mejor , a lo grande, para combinarlos en un solo archivo.

Algunas otras cosas a tener en cuenta:

• tener un montón de script etiquetas repartidos por todo el código HTML puede hacer que sea difícil de hacer mantenimiento en el guión
• Separar el código HTML y script en archivos separados ayuda a limitar la grado en que ellos están acoplados, de nuevo ayudando mantenimiento
• Poner script en un archivo separado hace que sea posible ejecutar ese archivo a través minifiers/compresores/envasadores, reduciendo al mínimo el tamaño de su código y la eliminación de los comentarios, dejando así libre para comentar en su código fuente sabiendo th Los comentarios serán privados
• Poner los scripts en archivos externos le da la oportunidad de mantener las cosas separadas por funcionalidad, y luego combinarlas en un solo archivo para la página (comprimido/minificado/empacado) para una entrega eficiente al navegador

Más:

• YUI's "Best Practices for Speeding Up your Web Site"
• Google's "Web Performance Best Practices"

Answer 2

Combinando las secuencias de comandos lo más posible es mejor en mi opinión. Algunos navegadores tienen que pausar la representación mientras ejecutan bloques de script. Echa un vistazo a la respuesta en: Javascript Performance: Multiple script blocks Vs single bigger block

Answer 3

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 único bloque de script cargas más rápido que el uso de múltiples bloques de script, ya que tienen que ser evaluados individualmente. Sin embargo, esta diferencia podría no ser reconocible.

Answer 4

Hasta este punto, todo el código JavaScript se encontraba en una etiqueta, esto no tiene por qué ser el caso.

Usted puede tener tantas etiquetas como le gustaría en un documento.

Las etiquetas se procesan según van apareciendo.

Espero que esto ayude.