Javascript CSS交付优化：如何延迟CSS加载？
我正在尝试优化CSS交付遵循谷歌开发者文档 正如您在内联一个小CSS文件的示例中所看到的，在头中内联了关键CSS，在加载页面后加载原始的small.CSSJavascript CSS交付优化：如何延迟CSS加载？,javascript,html,css,google-pagespeed,deferred-loading,Javascript,Html,Css,Google Pagespeed,Deferred Loading,我正在尝试优化CSS交付遵循谷歌开发者文档 正如您在内联一个小CSS文件的示例中所看到的，在头中内联了关键CSS，在加载页面后加载原始的small.CSS <html> <head> <style> .blue{color:blue;} </style> </head> <body> <div class="blue"> Hello, world!
<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>
.blue{颜色：蓝色；}
你好，世界！
如何在加载页面后加载大型css文件？如果您不介意使用jQuery，这里有一个简单的代码片段来帮助您。（否则，请发表评论，我将编写一个纯js示例
function loadStyleSheet(src) {
if (document.createStyleSheet){
document.createStyleSheet(src);
}
else {
$("head").append($("<link rel='stylesheet' href='"+src+" />"));
}
};
函数加载样式表（src）{
if（document.createStyleSheet）{
document.createStyleSheet（src）；
}
否则{
$（“head”）。除了Fred的答案之外，还附加（$（“）：
使用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>
<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>
.blue{颜色：蓝色；}
$（文档）.ready（函数（）{
如果（$（“正文”）.size（）>0）{
if（document.createStyleSheet）{
document.createStyleSheet（'style.css'）；
}
否则{
$（“head”）。追加（$（“”）；
}
}
});
你好，世界！
从
使用纯Javascript和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>
<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>
.blue{颜色：蓝色；}
var stylesheet=document.createElement（'link'）；
stylesheet.href='style.css'；
stylesheet.rel='stylesheet'；
stylesheet.type='text/css'；
document.getElementsByTagName（'head'）[0].appendChild（样式表）；
你好，世界！
对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);
}
}
//延迟样式表的加载
//只需将其添加到标记之前
//在包含任何javaScript文件之前（为了性能）
函数加载样式表（src）{
if（document.createStyleSheet）document.createStyleSheet（src）；
否则{
var stylesheet=document.createElement（'link'）；
stylesheet.href=src；
stylesheet.rel='stylesheet'；
stylesheet.type='text/css'；
document.getElementsByTagName（'head'）[0].appendChild（样式表）；
}
}
试试这个片段
谷歌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>
var cb=函数（）{
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窗口。addEventListener（'load'，cb）；
警告：正文{背景图像：url（“http://example.com/image.jpg“”；}
在css文件中会使您的css文件仍然呈现阻塞
如果您尝试了上述所有解决方案，但仍然收到PageSpeed insights的渲染阻止警告，那么您的css文件中可能有此样式规则。经过数小时的测试，结果表明，此规则正是使我的css的所有body{background image:url（…）我通过从
.css<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
- linkrel=“preload”as=“style”异步请求样式表
- 链接中的onload属性允许CSS在加载完成后进行处理
- 一旦onload处理程序被使用，“null”有助于某些浏览器避免在切换rel属性时重新调用该处理程序
- 对noscript元素内部样式表的引用可以作为不执行JavaScript的浏览器的回退
小.CSS