渲染阻塞 Javascript & CSS MVC4答案

【问题标题】：Render Blocking Javascript & CSS MVC4渲染阻塞 Javascript & CSS MVC4
【发布时间】：2014-05-09 18:00:36
【问题描述】：

我正在开发 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%优化？

谢谢，提前。

图片如下：

【问题讨论】：

它可能检测到modernizr 加载在头部，而不是页脚，因此它抱怨它会减慢页面加载速度。在很多情况下，您很可能最终会删除modernizr（或将其合并到您的最终脚本文件中）。

标签： javascript css performance asp.net-mvc-4 google-pagespeed

【解决方案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")

【讨论】：