renderizado - optimizar la entrega de css
¿Cómo cargar CSS de forma asíncrona sin usar JavaScript? (4)
Supongamos que si tengo un sitio web http://somethingsomething.com
Y tengo 3 archivos css
- common.css
- homepage.css
- inner-pages.css
homepage.css se requiere para la página de inicio y common.css es para todo el sitio, pero inner-pages.css es solo para otras páginas y es un archivo grande. ¿Es posible cargar inner-pages.css después de la descarga de datos de la página de inicio? De la misma manera como usamos el atributo async para la etiqueta de script . Por lo que sé, el atributo async es solo para JS no para CSS
Mi amigo sugirió usar requirejs para este http://requirejs.org/docs/faq-advanced.html#css pero no quiero usar javascript para cargar css e incluso pensaría en la forma en que JS no usaría require.js solo por esto Así que si no es posible solo con CSS. ¿Cuál sería la manera simple de hacer esto?
Async CSS con media = "bogus" y un <link> al pie Digamos que tenemos nuestro HTML estructurado de esta manera:
<head>
<!-- unimportant nonsense -->
<link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
<!-- other unimportant nonsense, such as content -->
<link rel="stylesheet" href="style.css">
</body>
Más en http://codepen.io/Tigt/post/async-css-without-javascript
Incluya su CSS en <body> lugar de <head> ... "parece que este truco hace que Chrome y Firefox inicien el cuerpo antes, y simplemente no bloquean las hojas de estilo del cuerpo". y agrega una condición para IE:
cabeza
<head>
<!--[if IE]>
<link rel="stylesheet" href="style.css"> <!-- blocking, but what else can ya do? -->
<![endif]-->
</head>
cuerpo
<body>
<!--[if !IE]> -->
<link rel="stylesheet" href="style.css" lazyload>
<!-- <![endif]-->
</body>
por Taylor Hunt @ codepen.io
Puede colocar un iframe en su página que apunte a alguna página ficticia que sirva al CSS, que debería servir al archivo CSS asíncrono.
<iframe src="loadcss.html"></iframe>
Tenga en cuenta que parece bastante trivial, esto provoca un mínimo de 2 transferencias de archivos css por página y 3 transferencias de archivos css por página secundaria (si no está almacenada en caché). Si fueras a minimizar el css, solo tendrías 1 transferencia independientemente.
tratar
$.ajax({
url:''/css.css'',
type:''get'',
success:function(css){
$(''html'').append(''<style>''+css+''</style>'');
}
});
o
function getCss(url){
$(''<link>'',{rel:''stylesheet'',type:''text/css'',''href'':url}).appendTo(''head'');
}
getCss(''/css.css'');
ok lo siento, no vi que no quieres usar javascript
¿qué hay de usar css @import:
<style>
@import url(''/style1.css'');
@import url(''/style2.css'');
</style>