63

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

4

4 回答 4

72

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

从他们的安装指南：

将脚本标签放在<head>HTML 中。为了获得最佳性能，您应该在样式表引用之后让它们跟随。我们建议将 Modernizr 放在头部的原因有两个：HTML5 Shiv（在 IE 中启用 HTML5 元素）必须在<body>.防止FOUC。

于 2011-06-07T23:28:30.250 回答
55

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

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

由于我大约 90% 的流量来自原生支持 HTML5 的浏览器，而且我没有核心 CSS 需要modernizr 类在初始渲染时正确显示，所以我使用这种方法将 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>
于 2013-04-18T14:17:04.037 回答
34

Paul Irish 现在建议，对于 > 75% 的网站，将 Modernizr 置于head.

将 Modernizr 移至底部

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

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

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

于 2014-10-08T13:01:33.060 回答
15

以稍微不同的方式使用 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 及更低版本的头部加载，并且它将在任何其他浏览器的主体之前加载。

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

于 2015-01-26T15:08:55.707 回答