渲染阻塞 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的自动化解决方案