Ponga CSS y JavaScript en archivos o HTML principal?

Aunque siempre se recomienda poner código JavaScript y CSS en los archivos apropiados (como .js y .css ), la mayoría de los principales sitios web (como Amazon, Facebook, etc.) colocan una parte significativa de su código JavaScript y CSS directamente dentro de los principales. Página HTML

¿Dónde está la mejor opción?

http://developer.yahoo.com/performance/rules.html#external

Yahoo (a pesar de que tienen muchos estilos y scripts en línea), recomienda hacerlos externos. Creo que la velocidad de la página de google solía (¿o todavía lo hace?) Hacer lo mismo.

Es realmente una cosa lógica separarlos. Hay tantos beneficios para mantener CSS y JS separados del HTML. Cosas como administración lógica de códigos, almacenamiento en caché de esas páginas, menor tamaño de página (¿prefieres una solicitud de ~ 200ms para un recurso almacenado en caché de 400k o una demora de 4000ms para descargar esos datos en cada página?), Opciones SEO (menos basura para google para ver cuando los scripts / estilos son externos), más fácil de minimizar los scripts externos (herramientas en línea, etc.), pueden cargarlos de forma síncrona desde diferentes servidores ….

Ese debe ser su objective principal en cualquier sitio web. Todos los estilos que componen su sitio web completo deben estar en un archivo (o archivos para cada página, luego fusionados y minificados cuando se actualicen), lo mismo para javascript.

En el mundo real (no hacer un proyecto para ti, hacer uno para un cliente o una parte interesada que quiere resultados), el único momento en que no tiene sentido cargar otro recurso de javascript u otra hoja de estilo (y así usar estilos en línea / javascript) es si hay algún tipo de información dinámica que está en una especie de por usuario, por sesión o por período de tiempo que no se puede lograr simplemente de otra manera. Ejemplo: cuando mi sitio web tiene una promoción, volcamos una etiqueta de script con un pequeño objeto de información JSON. Como no minimizamos ni fusionamos varios archivos, tiene más sentido incluirlo en la página. Claro que hay otras maneras de hacerlo, pero cuesta $ 20 para hacer eso, mientras que podría costar> $ 100 para hacerlo de otra manera.

Tal vez Amazon / Facebook / Google, etc. usan tanto código en línea para que sus servidores no sean tan gravados. No estoy muy seguro de la evaluación comparativa entre solicitar un archivo de 1 MB en un hit o solicitar 10 archivos de 100 KB (suponiendo 1 MB / 10 = 100 KB por ejemplos), pero ¿qué sería más rápido? Potencialmente, el archivo de 1MB, PERO las solicitudes más pequeñas se pueden cargar de forma síncrona, lo que significa que cada una de esas 10 solicitudes podría provenir de un servidor / dominio aparte potencialmente, lo que reduciría el tiempo total de carga.

Además, las páginas de inicio de Google parecen descargar una matriz de información JSON para los widgets, presumiblemente porque comstack toda esa información de varias fonts, la minimiza, la almacena en la memoria caché y luego la coloca en la página, luego las funciones javascript crean el diseño ( poder de procesamiento del lado del cliente en lugar del lado del servidor).

Coloque su .js en múltiples archivos, luego empaquete, minify y gzip en un solo archivo.

Mantenga su HTML en múltiples archivos separados.

Coloque su .css en varios archivos, luego empaquete, minify y gzip en un solo archivo.

Luego, simplemente envíe un archivo css y un archivo js al cliente para almacenarlos en la memoria caché.

No los alinees con tu HTML.

Si los alinea, cualquier cambio en css o html o js obliga al usuario a descargar los tres nuevamente.

La razón principal por la cual los principales sitios web tienen js & cs en sus archivos, es porque los principales sitios web se pudren. Las principales compañías no respetan los estándares y las mejores prácticas, solo lo piratean hasta que funciona y luego dicen “¿por qué perder dinero en nuestro sitio web? ¿Funciona?”.

No mire ejemplos de sitios web en vivo, porque el 99% de todos los ejemplos en Internet muestran malas prácticas.

También por el amor de Dios, separación de preocupaciones por favor. Nunca debe usar javascript en línea o css en línea en páginas html.

Una investigación interesante podría ser si incluyen varios archivos .css independientemente de los bloques de estilo que también esté viendo. Tal vez es por encima o tal vez es la conveniencia.

Descubrí que, al trabajar con diferentes estilos de desarrollador de interfaces (y de implementadores de contenido), la conveniencia / autoridad a menudo gana frente a los plazos y “hacer el trabajo”. En un proyecto de gran escala podría haber factores como “No, no está tocando nuestras hojas de estilo”, o quizás, si no hay una hoja de estilo con una solicitud http, entonces la conveniencia ha ganado una batalla contra las buenas prácticas.

Si su css y código JavaScript son para un uso global, entonces es mejor ponerlos en los archivos apropiados. De lo contrario, si el código se usa solo para una página determinada, como la página de inicio, ponerlos directamente en html es aceptable, y es bueno para el mantenimiento.

Nuestro equipo lo mantiene todo separado. Todos los recursos como este van a una carpeta llamada _Content .

CSS entra en _Content/css/xxx.js

JS entra en _Content/js/lib/xxx.js (para todos los paquetes de la biblioteca)

Los eventos y funciones de la página personalizada se llaman desde la página, pero se colocan en un archivo JS principal en _Content/js/Main.js

Las imágenes entrarán en el mismo lugar en _Content/images/xxx.x

Así es como lo presentamos, ya que mantiene el marcado HTML como debería ser, para el marcado.

Creo que poner css y js en el html principal hace que la página cargue más rápido.