我正在尝试针对开发人员的Google文档优化CSS交付https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
正如您在内联一个小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文件？
谷歌建议在头部和其他CSS内部使用非常重要的CSS内联<noscript><link rel="stylesheet" href="small.css"></noscript>.
这引起了我的一些问题:
<noscript></noscript>,这是脚本？启用JavaScript时它会起作用吗？浏览器兼容吗？所以我通过Google的PageSpeed Insights运行我的网站,它告诉我,我可以通过延迟加载非关键资源来改善CSS交付.特别是它引用了包含字体真棒:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
我想我可以通过简单地将它放在关闭body标签之前的脚本之前来延迟它的负载,如下所示:
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/min/scripts.min.js"></script>
</body>
</html>
然而!在查看Google 关于交付速度的文档时,我发现了两种不同的解决方案.
用我的母语(荷兰语;你可以在右下角更改文档的语言)文档声明我应该将非必要的CSS 放在结束的html标记之下.这对我来说似乎很奇怪.在尝试通过JS访问文件时,这会不会复杂化？ 你为什么不把它放在关闭身体标签之前？
...
</body>
</html>
<link rel="stylesheet" href="small.css">
但是,在英文文档中,事情变得更复杂并需要JavaScript:
...
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'small.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>
</body>
</html> …