推迟未使用的CSS

Question

我已经制定一种防止闪光的-无样式内容上的页的上述屏内容（FOUC）临界CSS过程。

我坚持，就会向被谷歌PageSpeed Insights的（灯塔）和/或Chrome的绩效审计强调“推迟未使用的CSS”点。

我已经通过其他物品走了，但他们没有工作。

总结到目前为止，我已经试过。

• loadCSS（）
• 使用requestAnimationFrame的脚本

参考：CSS delivery optimization: How to defer css loading?

如果我延误3秒的固定时间通过装载在setTimeout脚本“推迟未使用的CSS”的问题消失。 3秒钟的时间什么需要对谷歌PageSpeed Insights的测试（移动），因为它们是较慢的设备，但3秒钟的时间很多关于台式机一般具有更强的处理能力（注意，并非总是如此，因此不包括用户代理的基于逻辑）。

因此，问题归结到我怎么延误而不管设备类型或规格的时间最少加载CSS。

随意扔任何粗糙的想法，我会尝试出来报到，如果你的想法的作品，我们将更新的代码和标记你的答案有一个选择。

接下来我的名单试穿是requestAnimationFrame +小的固定延迟。

Answer 1

请记住，灯塔是一个咨询工具;它提出了建议，而不是需求。它是由你来决定，如果这些建议在您的业务需求的背景下才有意义。这些措施包括称重的时间和精力来确定和实施针对该问题的影响的解决方案。

谷歌对解决灯塔的“推迟未使用CSS”的建议忠告：Defer unused CSS。总结：通过网页立即需要CSS应该内联，而不是从一个单独的文件中加载。

Answer 2

手动加载基于两个触发器，以先到者为准一个CSS。

• [在2500ms的的setTimeout]
• [滚动事件]

<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>

这使得关于推迟未使用的CSS走了PageSpeed Insights的建议。

requestAnimationFrame，如果有的话，将加载如果标签在后台已开通在大多数浏览器搪塞CSS文件。你可以从上面的代码中删除它，如果它不符合你的要求。 Ref

的console.log（）是不是在所有浏览器。不要在生产中使用它。 Ref