Javascript 如何延迟加载css文件（适用于google speed insights）

我试图在谷歌页面速度洞察上获得100/100的分数。但它一直告诉我一些css文件正在屏蔽隐藏的内容。如何确保在加载主要内容后加载这些文件？这样它就不会再出现在页面速度洞察中了

我尝试使用jquery异步加载文件，但这样，消息仍然会在页面速度工具中弹出

我尝试了以下方法：

<script>
var loadMultipleCss = function(){
    //load local stylesheet
    loadCss('myawesomestyle.css');

    //load Bootstrap from CDN
    loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

    //load Bootstrap theme from CDN
    loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
}

var loadCss = function(cssPath){
    var cssLink = document.createElement('link');
    cssLink.rel = 'stylesheet';
    cssLink.href = cssPath;
    var head = document.getElementsByTagName('head')[0];
    head.parentNode.insertBefore(cssLink, head);
};

//call function on window load
window.addEventListener('load', loadMultipleCss);
</script>

var loadMultipleCss=函数（）{
//加载本地样式表
loadCss（'myawesomestyle.css'）；
//从CDN加载引导
loadCss（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
//从CDN加载引导主题
loadCss（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
}
var loadCss=函数（cssPath）{
var cssLink=document.createElement（'link'）；
cssLink.rel='stylesheet'；
cssLink.href=cssPath；
var head=document.getElementsByTagName（'head'）[0]；
head.parentNode.insertBefore（cssLink，head）；
};
//窗口加载时调用函数
window.addEventListener（'load'，loadMultipleCss）；

当然是我自己的文件路径

---

但是对于Google PageSpeed Insights，这不起作用。

你能分享你正在优化的网站链接吗

你确定你的页面没有缓存在某个地方吗

有两种方法对我有效：

A） 您可以将样式表标记放在结束标记之后

B） 另一种方法是将以下链接标记放入头部部分：

<link rel="preload" id="stylesheet" href="/assets/css/below.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/css/below.css"></noscript>

方法B的缺点是并非所有浏览器都支持链接标记中的rel=preload，您需要包括以下polyfill：

<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);

/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
!function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);
</script>

/*! loadCSS。[c] 2017年灯丝集团有限公司麻省理工学院许可证*/
!函数（a）{“使用严格”；var b=function（b，c，d）{function e（a）{return h.body？a（）：void setTimeout（function（）{e（a）}}function f（）{i.addEventListener&&i.removeEventListener（“load”，f），i.media=d | | |“all”}var g，h=a.document，i=h.createElement（“link”）；if（c）g=c；else{var j=（h.body | h.getElementsByName）（[childrent]；head j][j]）var k=h.styleSheets；i.rel=“stylesheet”，i.href=b，i.media=“only x”，e（function（）{g.parentNode.insertBefore（i，c？g:g.nextSibling）}）；var l=function（a）{for（var b=i.href，c=k.length；c-->）if（k[c].href==b）返回a（）；setTimeout（function（）{l（a）}；返回i.addEventListener&&i.addEventListener（“load”，f），i.onloadcsdefined=l，undefined；“未定义”！=typeof exports？exports.loadCSS=b:a.loadCSS=b}（“未定义”！=typeof global？global:this）；
/*! loadCSS rel=预加载多边形填充。[c] 2017年灯丝集团有限公司麻省理工学院许可证*/
!函数（a）{if（a.loadCSS）{var b=loadCSS.relpreload={}；if（b.support=function（）{try{return a.document.createElement（“link”）.relList.supports（“preload”）}catch（b）{return！1}，b.poly=function（）{for（var b=a.document.getElementsByTagName（“link”），c=0；c你能简单地告诉他们吗？@Jonasw不，当我尝试这样做时，它说我的CSS阻止了内容，我的JS阻止了。所以问题只会增加：PGreat，谢谢。预加载方法对我有效，不知怎的，当我修复CSS部分时，JS文件不再是问题。现在移动和桌面上都有100/100：）