javascript - 渲染阻塞 Javascript & CSS MVC4

Question

我正在开发 MVC 4 Web 应用程序以实现最佳优化。

现在只有最后一件事困扰着我。

问题：消除渲染阻塞 JavaScript 和 CSS

我知道的：

1) 在 _Layout.cshtml 中，@Styles.Render("~/Content/css") & @Scripts.Render("~/bundles/modernizr") 写在 '/head' 标签下方。

2) Javascript 阻塞可以通过使用'async' 来移除&CSS 应该写在'/html' 标签之外。

对于 CSS，这在我的代码中不起作用，对于 JS，我什么都不知道。

问题：如何让这个页面100%优化？

提前致谢。

下面是图片：

Answer 1

避免与 content.css 阻塞将其添加到您的布局标题

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