Question

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

Answer 1

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

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

Answer 2

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

我was testing this yesterday并且发现这是相当重要的 - 在我工作的网站上，已经相当好地优化了，将单个脚本添加到头部，在IE9中将我的加载时间延迟了约100ms，甚至没有受益于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>

Answer 3

Paul Irish现在建议为＆gt; 75％的网站将Modernizr置于head。

没有任何好处

将Modernizr移至底部

它更有可能引入意想不到的情况，但是对于用户而言根本没有任何脚本更好。

我打赌＆gt; 75％的网站不需要它。我宁愿改变这个默认值并教育25％而不是观看，因为我们放慢了所有这些网站的速度。

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

Answer 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及更低版本的头部，并且它将在任何其他浏览器的主体之前加载。

在评论中公开讨论利弊。

应该将Modernizr文件放在头上吗？

4 个答案: