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.) ponen una parte importante de su código JavaScript y CSS directamente dentro del Página HTMLPoner CSS y JavaScript en archivos o HTML principal?
¿Dónde está la mejor opción?
http://developer.yahoo.com/performance/rules.html#external
Yahoo (a pesar de que tienen muchos estilos en línea y scripts), recomienda hacerlas externa. 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 objetivo 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 haciendo un proyecto para usted, haciendo uno para un cliente o actor interesado en obtener resultados), el único momento en que no tiene sentido cargar otro recurso javascript u otra hoja de estilo (y así use inline styles/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 puede lograrse 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.
Quizás Amazon/Facebook/Google etc. usen tanto código en línea para que sus servidores no sean gravados tanto. 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 compila toda esa información de varias fuentes, la minimiza, la almacena en caché y luego la coloca en la página. construir el diseño (poder de procesamiento del lado del cliente en lugar del lado del servidor).
"información dinámica" es malo. Generar js dinámicamente es malvado. Lo estás haciendo mal. Almacene esos datos en el HTML o exhíbalos en REST. – Raynos
Hmm, ¿cómo sería que una función de cuenta atrás de javascript obtuviera la fecha para la cuenta atrás sin tirarla a la página de alguna manera, entonces? – Benno
¿por qué está recibiendo una cuenta regresiva? incluso así póngalo en el HTML. Personalmente lo colocaría en una animación CSS3 – Raynos
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.
he encontrado que al trabajar con diferentes estilos de interfaz de desarrollador (y los desplegados de contenido) que la comodidad/autoridad gana a menudo en la cara de los plazos y "conseguir que se hagan 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.
Coloque sus Js en varios archivos, a continuación, paquete, Minify y gzip que en un solo archivo.
Mantenga su HTML en múltiples archivos separados.
Coloque el css en varios archivos, a continuación, paquete, Minify y gzip que en un solo archivo.
Luego, simplemente envíe un archivo css y un archivo js al cliente para almacenarlos en caché.
Usted no enlíñelos con su código HTML.
Si Inline ellos, entonces cualquier cambio en el css o html o js fuerzas a los usuarios descargar los tres de nuevo.
la razón principal por los principales sitios web tienen js & cs en sus archivos, se debe a la pudrición de código de los principales sitios web. 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 directo, porque el 99% de todos los ejemplos en Internet muestran las malas prácticas.
También para el amor de dios, la separación de las preocupaciones por favor. Usted debe nunca utilizar en línea javascript o css en línea en páginas html.
Tienes toda la razón, este es un caso de bien contra mal - + Bruce, encontraste el mal, @Raynos, estás empujando lo bueno. – danjah
Si el código CSS y JavaScript es para un uso global, entonces lo mejor es ponerlos en 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.
"bueno para el mantenimiento". Desde cuando el acoplamiento duro siempre es bueno para el mantenimiento. – Raynos
Hay un punto de equilibrio para elegir, si una página siempre está cambiando, cada vez que tiene que cambiar el js/css y gzip de nuevo. Y no hay necesidad de que el usuario recargue el js/css si ya almacenaron en caché el js/css principal. – xdazz
Nuestro equipo lo mantiene todo separado. Todos los recursos como este entran en una carpeta llamada _Content.
CSS entra en _Content/css/xxx.js
JS entra en _Content/js/lib/xxx.js (Para todos los paquetes de bibliotecas)
eventos y funciones de la página personalizado Descarga llamados desde la página, pero se ponen en un archivo principal de JS en _Content/js/Main.js
las imágenes se van en el mismo lugar bajo _Content/images/xxx.x
Esto es sólo la forma en que sentar a cabo, ya que mantiene el formato HTML como debe ser, para el marcado.
Creo que poner css y js en el html principal hace que la página cargue más rápido.
Aunque es difícil de medir en una conexión rápida a Internet. –
Esa es una observación interesante. Me pregunto si es porque la mayor parte del tiempo se gasta configurando una conexión HTTP. Si la sobrecarga es lo suficientemente grande, es probable que desee empacar tanto como sea posible en la carga real. –
Sí, pregunta interesante (aunque quizás sea más adecuada en webmasters.SE?) –
Muchos estarán en desacuerdo, pero no hace gran diferencia. Siempre pongo los css y js que escribo en la página html. Es mucho más conveniente cambiarlo cuando puedo leer fácilmente las cosas. –