现代化检测文件应该放在<head>标签中吗？

Question

现代化检测文件应该放在<head>标签中吗？

javascriptmodernizrhtml-head

63

Modernizr JavaScript 文件的引用应该放在页面头部吗？我经常尝试将所有脚本放在页面底部，并且想要保持这个习惯。如果需要放在头部，为什么？

- amateur

4个回答

55

我认为不是: 在中放置的每个脚本都会阻止渲染和进一步的脚本执行。 Modernizr唯一必须在中完成的事情是集成html5shiv，它可以将HTML5标签支持添加到Internet Explorer 8及更早版本中。

昨天我测试过这个，并发现这相当重要-在我正在工作的网站上，已经相当优化的情况下，在IE9中将单个脚本添加到头部将延迟我的加载时间约100毫秒，而IE9甚至无法从shiv中受益！

由于约90％的流量来自本地支持HTML5的浏览器，并且我没有核心CSS需要使用modernizr类在初始渲染中正确显示，因此我使用这种方法，将html5shiv放入条件注释中，并加载不带集成shim的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>

- Chris Adams

我也遇到了同样的问题！通过加载modernizr.js和respond.js，我的页面加载时间显著变慢。你是否自定义了js文件以删除shiv，还是同时包含两者？ - Oneezy

2

我的modernizr.custom.min.js文件排除了shiv，并且仅定制了检查我实际使用的功能。根据您的需求，这可能足够小，可以考虑将其嵌入页面中。 - Chris Adams

谢谢Chris。我现在正在处理一个相当大的项目，所以我需要整个套件...只需将shiv删除并单独包含即可。同时也尝试让requireJS为我们工作。 - Oneezy

34

Paul Irish建议对于超过75%的网站没有必要在标签中放置Modernizr。

将Modernizr移到底部

它有可能引入意外情况，然而对于用户来说，在标签中没有任何脚本要好得多。

我敢打赌，超过75%的网站不需要在标签中使用它。我宁愿更改这个默认设置并教育那剩下的25%，也不想看到我们减缓所有这些网站的速度。

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

- David Murdoch

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及以下版本中加载到头部，并且在任何其他浏览器中它将在标签之前加载。

欢迎在评论中进行关于利弊的开放性讨论。

- redfox05

没错，这正是我想的，看起来很明显。仅在<IE9中加载自定义shim+modernizer（合并为唯一请求）的头部。 - aMarCruz

有没有任何理由不这样做？ - Duncan Lukkenaer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Wesley Murch · Accepted Answer

如果你想让 Modernizr 尽快下载并执行以防止 FOUC，请将其放在 <head> 中。

从他们的安装指南中可以看到：

将脚本标签放置在 HTML 的 <head> 中。为了获得最佳性能，您应该在样式表引用之后放置它们。我们建议将 Modernizr 放在 head 中的原因有两个：HTML5 Shiv（使 IE 中的 HTML5 元素可用）必须在 <body> 之前执行，如果您使用了 Modernizr 添加的任何 CSS 类，则需要防止 FOUC。