jquery - 在 ASP.NET MVC 中延迟渲染阻塞 CSS 包

当我使用 Google Page Speed Insights

它说我的 CSS 是渲染阻塞的，因此减慢了页面的初始加载速度。在以前的元素中，我使用 Javascript 动态添加了 CSS，这很好地推迟了加载。那么在仍然使用捆绑包的同时防止渲染阻塞的最佳方法是什么？

在 bundle.config 我有:

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"
                  ));

在_Layout.cshtml

@Styles.Render("~/Content/css")

最佳答案

我自己通过使用以下 HTML 找到了解决方案:

<script type="text/javascript">

    function load_css_async(filename) {


        var cb = function () {
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.href = filename;
            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>


@Styles.RenderFormat("<script type=\"text/javascript\">load_css_async('{0}')</script>", "~/Content/css")

这给了我 100/100 的 Page Insights :)

关于jquery - 在 ASP.NET MVC 中延迟渲染阻塞 CSS 包，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26843908/