Modernizr文件应该放在头上吗？答案

【问题标题】：should Modernizr file be placed in head?Modernizr文件应该放在头上吗？
【发布时间】：2011-09-10 11:46:28
【问题描述】：

是否应该在页面头部引用 Modernizr JavaScript 文件？我总是尝试将所有脚本放在页面底部并希望保留它。如果它需要在头脑中，为什么？

【问题讨论】：

【解决方案1】：

如果您希望Modernizr尽快下载并执行以防止出现FOUC，请将其放在<head>中

删除<head>中的脚本标签你的 HTML。为了获得最佳性能，您应该让他们跟随你样式表引用。我们之所以建议将 Modernizr 放在 head 有两个方面：HTML5 Shiv（即在 IE 中启用 HTML5 元素）必须在<body> 之前执行，如果你正在使用任何 CSS 类 Modernizr 补充说，你会想要防止 FOUC。

【讨论】：

哈，福布克。为此 +1！
看起来 FOBUC（Flash Of Butt-Ugly Content）已经不再受“FOUC”（Flash of Unstyled Content）的青睐。谷歌甚至无法（或不会）找到任何对它的引用。呸。
如果您最近才发现这一点，Paul Irish 的更新在 2014 年的帖子中对此进行了介绍 github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059

【解决方案2】：

我认为不会：您在<head> 中放置的每个脚本都会阻止渲染和进一步的脚本执行。 Modernizr 唯一必须在<head> 中执行的操作是集成的html5shiv，它将HTML5 标签支持破解到Internet Explorer 8 和更早版本中。

我was testing this yesterday 发现这非常重要——在我工作的网站上，该网站已经进行了相当好的优化，将单个脚本添加到头部延迟了我在 IE9 中的加载时间约 100 毫秒，这并没有甚至不能从 shiv 中受益！

由于我大约 90% 的流量来自原生支持 HTML5 的浏览器，而且我没有需要modernizr 类在初始渲染时正确显示的核心 CSS，所以我使用这种方法将 html5shiv 放入条件注释并在没有集成垫片的情况下加载modernizr：

<html>
    <head>
        …
        <!--[if lt IE 9]>
            <script src="html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        …
        <script src="modernizr.custom.min.js"></script>
    </body>
</html>

【讨论】：

我也遇到了同样的问题！通过加载modernizr.js 和respond.js 它显着减慢了我的页面加载时间。您是自定义 js 文件以删除 shiv 还是同时包含两者？
我的 modernizr.custom.min.js 不包括 shiv 并且也仅用于检查我实际使用的功能。根据您的需要，这实际上可能足够小，可以考虑在页面上进行内联
谢谢克里斯。现在正在工作一个相当大的项目，所以我需要整个套件..只需 x 出 shiv 并单独包含它。还试图让 requireJS 为我们做一些工作

【解决方案3】：

Paul Irish 现在建议，对于 > 75% 的网站，将 Modernizr 放在 head 中没有任何好处。

将 Modernizr 移到底部

它更有可能引入意外情况，但是对于用户来说，完全没有脚本会更好。

我敢打赌 >75% 的网站不需要它。我宁愿改变这个默认设置并教育 25% 的人，也不愿看着我们放慢所有这些网站的速度。

https://github.com/h5bp/html5-boilerplate/issues/1605

【讨论】：

【解决方案4】：

以稍微不同的方式使用 IE 条件语句怎么样？大家怎么看这个解决方案：

在<head></head> 标签内：

<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>

</body>标签结束前：

<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>

这将导致 Modernizr 在 IE8 及更低版本的头部加载，并且它将在任何其他浏览器的主体之前加载。

欢迎在 cmets 中公开讨论利弊。

【讨论】：

是的，我就是这么想的，这似乎很明显。在的头部加载自定义 shim+modernizer（为独特的请求而加入）
有什么理由不这样做吗？