Html 延迟未使用的CSS

我有一个关键的CSS流程，它可以防止页面折叠内容上方出现非样式内容（FOUC）闪烁

我被谷歌PageSpeed insights（lighthouse）和/或Chrome的性能审计所强调的“延迟未使用CSS”观点所困扰

我看过其他文章，但都不管用

总结一下，到目前为止我已经尝试过了

• loadCSS（）
• 使用requestAnimationFrame的脚本

参考：

如果我通过

setTimeout

延迟加载脚本3秒，那么“延迟未使用的CSS”问题就会消失。 Google PageSpeed Insights test（mobile）需要3秒，因为它们是速度较慢的设备，但对于处理能力通常更高的台式机来说，3秒是很多（注意，并非总是如此，因此排除了基于用户代理的逻辑）

因此，问题归结为，无论设备类型或规格如何，如何以最少的时间延迟加载CSS

请随意提出任何粗略的想法，我会尝试一下，然后再报告。如果你的想法有效，我们会更新代码，并标记你的答案是否正确

---

我列表中的下一个尝试是

requestAnimationFrame

+小的固定延迟。

基于两个触发器手动加载CSS，以先发生的为准

• [设置超时2500毫秒]
• [滚动事件]

var raf=requestAnimationFrame | | mozRequestAnimationFrame||
webkitRequestAnimationFrame | | msRequestAnimationFrame；
var app_css_loaded=false；
/*log（performance.now（）*/
var loadAppCss=函数（）{
如果（！app\u css\u加载）{
app_css_loaded=true；
var l=document.createElement（'link'）；l.rel='stylesheet'；
l、 href='YOUR_COMBINED_和_MINIFIED_CSS_HERE.CSS'；
var h=document.getElementsByTagName（'head'）[0]；h.parentNode.insertBefore（l，h）；
/*log（performance.now（）*/
}
};
var cb=函数（）{
/*log（performance.now（）*/
setTimeout（函数（）{
/*log（performance.now（）+'-'+'4.timeout start'）*/
loadAppCss（）；
/*log（performance.now（）+'-'+'6.timeout end'）*/
}, 3000);
};
addEventListener（'load'，function（））{
/*log（performance.now（）+'-'+'2.直接触发cb'）*/
if（raf）{raf（cb）；}else{cb（）；}；
});
var loadAppCssOnScroll=函数（）{
/*log（performance.now（）*/
removeEventListener（'scroll'，loadAppCssOnScroll）；
if（raf）{raf（loadAppCss）；}else{loadAppCss（）}；
};
window.addEventListener（'scroll'，loadAppCssOnScroll）；

这使得关于延迟未使用CSS的PageSpeed insights建议消失

requestAnimationFrame（如果可用）将暂停加载CSS文件，如果该选项卡在大多数浏览器的后台打开。如果它不符合您的要求，您可以从上述代码中删除它

---

console.log（）并非在所有浏览器中都可用。不要在生产中使用它

您是否尝试过谷歌PSI本身的解决方案？我只是浏览了一下那页，现在已经过时了。但这里有一些观察结果。requestAnimationFrame和setTimeout为0仍将导致PageSpeed insights建议“延迟未使用的CSS”。“延迟未使用的css”的解释：延迟加载不需要足够延迟来呈现页面的css。我观察到2500-3000毫秒的延迟是“足够”的，你可能想要阅读。正是关于这一点/问题。您可能不喜欢本文中的解决方案，因为它需要一种完全不同的方法。@JoostS感谢您共享此链接。这篇文章确实有一个有效的方法。有些人可能不值得在现有项目中重新实施所有建议。

<script>
    var raf = requestAnimationFrame || mozRequestAnimationFrame ||
    webkitRequestAnimationFrame || msRequestAnimationFrame;
    var app_css_loaded = false;
    /* console.log(performance.now() + ' - ' + '1. async css script init'); */
    var loadAppCss = function(){
        if(!app_css_loaded) {
            app_css_loaded = true;
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.href = 'YOUR_COMBINED_AND_MINIFIED_CSS_HERE.css';
            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
            /* console.log(performance.now() + ' - ' + '5. script injected'); */
        }
    };
    var cb = function() {
        /* console.log(performance.now() + ' - ' + '3. cb called'); */
        setTimeout(function(){
            /* console.log(performance.now() + ' - ' + '4. timeout start'); */
            loadAppCss();
            /* console.log(performance.now() + ' - ' + '6. timeout end'); */
        }, 3000);
    };

    window.addEventListener('load', function(){
        /* console.log(performance.now() + ' - ' + '2. triggering cb directly'); */
        if(raf) { raf(cb); } else { cb(); };
    });
    var loadAppCssOnScroll = function(){
        /* console.log(performance.now() + ' - ' + '### triggering cb on scroll'); */
        window.removeEventListener('scroll', loadAppCssOnScroll);
        if(raf) { raf(loadAppCss); } else { loadAppCss() };
    };
    window.addEventListener('scroll', loadAppCssOnScroll);
</script>