Si solo le importa el rendimiento, la mayoría de los consejos en este hilo son totalmente erróneos y cada vez son más incorrectos en la era SPA, donde podemos suponer que la página es inútil sin el código JS. He pasado innumerables horas optimizando los tiempos de carga de la página SPA y verificando estos resultados con diferentes navegadores. En general, el aumento del rendimiento al reorganizar su html puede ser bastante dramático.
Para obtener el mejor rendimiento, debe pensar en las páginas como cohetes de dos etapas. Estas dos etapas corresponden aproximadamente a las fases <head>y <body>, pero piense en ellas como <static>y <dynamic>. La parte estática es básicamente una constante de cadena que empuja hacia abajo el tubo de respuesta lo más rápido posible. Esto puede ser un poco complicado si usa una gran cantidad de middleware que configura las cookies (estas deben configurarse antes de enviar contenido http), pero en principio solo está descargando el búfer de respuesta, con suerte antes de saltar a algún código de plantilla (razor, php, etc) en el servidor. Esto puede sonar difícil, pero solo lo estoy explicando mal, porque es casi trivial. Como habrás adivinado, esta parte estática debe contener todos los JavaScript incluidos y minimizados. Se vería algo así como
<!DOCTYPE html>
<html>
<head>
<script>/*...inlined jquery, angular, your code*/</script>
<style>/* ditto css */</style>
</head>
<body>
<!-- inline all your templates, if applicable -->
<script type='template-mime' id='1'></script>
<script type='template-mime' id='2'></script>
<script type='template-mime' id='3'></script>
Dado que le cuesta casi nada enviar esta porción por el cable, puede esperar que el cliente comience a recibir esto en algún lugar alrededor de 5 ms + latencia después de conectarse a su servidor. Suponiendo que el servidor está razonablemente cerca, esta latencia podría estar entre 20 ms y 60 ms. Los navegadores comenzarán a procesar esta sección tan pronto como la obtengan, y el tiempo de procesamiento dominará normalmente el tiempo de transferencia por un factor 20 o más, que ahora es su ventana amortizada para el procesamiento del lado del servidor<dynamic> .
El navegador tarda aproximadamente 50 ms (cromo, el resto puede ser un 20% más lento) para procesar jquery en línea + señalizador + angular + ng animado + ng táctil + ng rutas + lodash. Eso es bastante sorprendente en sí mismo. La mayoría de las aplicaciones web tienen menos código que todas esas bibliotecas populares juntas, pero supongamos que tiene la misma cantidad, por lo que ganaríamos latencia + 100 ms de procesamiento en el cliente (esta ganancia de latencia proviene del segundo fragmento de transferencia). Cuando llega el segundo fragmento, hemos procesado todos los códigos y plantillas js y podemos comenzar a ejecutar transformaciones dom.
Puede objetar que este método es ortogonal al concepto de alineación, pero no lo es. Si, en lugar de en línea, vincula a cdns o sus propios servidores, el navegador tendría que abrir otra (s) conexión (es) y retrasar la ejecución. Dado que esta ejecución es básicamente gratuita (ya que el lado del servidor está hablando con la base de datos), debe quedar claro que todos estos saltos costarían más que no hacer ningún salto. Si hubiera una peculiaridad del navegador que dijera que js externo se ejecuta más rápido, podríamos medir qué factor domina. Mis mediciones indican que las solicitudes adicionales matan el rendimiento en esta etapa.
Trabajo mucho con la optimización de aplicaciones de SPA. Es común que las personas piensen que el volumen de datos es un gran problema, mientras que, en verdad, la latencia y la ejecución a menudo dominan. Las bibliotecas minimizadas que enumeré agregan hasta 300 kb de datos, y eso es solo 68 kb descomprimidos, o 200 ms de descarga en un teléfono 2mbit 3g / 4g, que es exactamente la latencia que tomaría en el mismo teléfono para verificar si tenía los mismos datos en su caché ya, incluso si era proxy en caché, porque el impuesto de latencia móvil (latencia de teléfono a torre) todavía se aplica. Mientras tanto, las conexiones de escritorio que tienen una latencia de primer salto más baja generalmente tienen un ancho de banda más alto de todos modos.
En resumen, en este momento (2014), es mejor incorporar todos los scripts, estilos y plantillas.
EDITAR (MAYO 2016)
A medida que las aplicaciones JS continúan creciendo, y algunas de mis cargas ahora se acumulan a más de 3 megabytes de código minificado, se hace evidente que, al menos, las bibliotecas comunes ya no deberían estar en línea.