渲染阻塞 Javascript & CSS MVC4

Posted

技术标签:

【中文标题】渲染阻塞 Javascript & CSS MVC4【英文标题】:Render Blocking 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(或将其合并到您的最终脚本文件中)。 【参考方案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")

【讨论】:

以上是关于渲染阻塞 Javascript & CSS MVC4的主要内容,如果未能解决你的问题,请参考以下文章

前端工程师手册css会阻塞页面dom解析吗?javascript呢?

翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

第1082期关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

网页性能优化:防止JavaScriptCSS阻塞浏览器渲染页面

优化浏览器渲染

浏览器渲染页面的探讨