我正在尝试在开发人员https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example的google文档之后优化CSS交付
正如您在内联一个小CSS文件的示例中所看到的那样，内联中的内联关键CSS和原始的small.css在页面加载后加载。
<html>
<head>
<style>
.blue{color:blue;}
</style>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
关于这个例子的问题：
如何在页面加载后加载大型css文件？
如果你不介意使用jQuery，这里有一个简单的代码片段来帮助你。 （否则评论，我会写一个纯粹的js例子
function loadStyleSheet(src) {
if (document.createStyleSheet){
document.createStyleSheet(src);
}
else {
$("head").append($("<link rel='stylesheet' href='"+src+" />"));
}
};
只需在你的$(document).ready()或window.onload函数中调用它，你就可以了。
对于＃2，你为什么不试试呢？在浏览器中禁用Javascript并查看！
顺便说一下，一个简单的谷歌搜索能带给你的程度是多么惊人;查询"post load css"，这是第四次击中... http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
对Fred提供的函数进行一点修改，使其更高效，不受jQuery的影响。我在我的网站的生产中使用此功能
// to defer the loading of stylesheets
// just add it right before the </body> tag
// and before any javaScript file inclusion (for performance)
function loadStyleSheet(src){
if (document.createStyleSheet) document.createStyleSheet(src);
else {
var stylesheet = document.createElement('link');
stylesheet.href = src;
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
}
}
除了弗雷德的回答：
使用jQuery和Noscript的解决方案
<html>
<head>
<style>
.blue{color:blue;}
</style>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if($("body").size()>0){
if (document.createStyleSheet){
document.createStyleSheet('style.css');
}
else {
$("head").append($("<link rel='stylesheet'
href='style.css'
type='text/css' media='screen' />"));
}
}
});
</script>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
来自http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery
使用纯Javascript和Noscript
<html>
<head>
<style>
.blue{color:blue;}
</style>
<script type="text/javascript">
var stylesheet = document.createElement('link');
stylesheet.href = 'style.css';
stylesheet.rel = 'stylesheet';
stylesheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(stylesheet);
</script>
</head>
<body>
<div class="blue">
Hello, world!
</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>
试试这个片段
author声称它是由谷歌的PageSpeed团队发布的
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'yourCSSfile.css';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); };
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);
</script>
警告：css文件中的body{background-image: url("http://example.com/image.jpg");}会使您的css文件仍然呈现阻塞状态。
如果您尝试了上述所有解决方案，但仍然可以从PageSpeed洞察中获得渲染阻止警告，那么您可能在css文件中有此样式规则。经过数小时的测试后发现，这条规则使得我的所有CSS在PageSpeed见解中被标记为渲染阻止资源。我发现同样的问题一直是discussed before。
我不知道为什么body{background-image: url(...)为所有的css文件做这个！，虽然我在文件中有不同的图像资源，用于按钮，图标等等。
我通过从.css文件中移动此规则并将其放入内联样式来修复此问题。不幸的是，你必须打破你的css计划并将规则放在所有布局HTML文件中，而不是在所有HTML布局中导入的1 css文件中，但PageSpeed见解中的90和绿色应该得到它。