Javascript Modernizr 文件应该放在 head 中吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6272702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
should Modernizr file be placed in head?
提问by amateur
Should the reference to the Modernizr JavaScript file be in the head of the page? I always try and place all scripts on the bottom of the page and would like to preserve this. And if it needs to be in the head, why?
对 Modernizr JavaScript 文件的引用是否应该位于页面的头部？我总是尝试将所有脚本放在页面底部，并希望保留它。如果它需要在头脑中，为什么？
回答by Wesley Murch
If you want Modernizrto download and execute as soon as possible to prevent a FOUC, put it in the <head>
如果您希望Modernizr尽快下载并执行以防止FOUC，请将其放入<head>
From their installation guide:
从他们的安装指南：
Drop the script tags in the
<head>of your HTML. For best performance, you should have them follow after your stylesheet references. The reason we recommend placing Modernizr in the head is two-fold: the HTML5 Shiv (that enables HTML5 elements in IE) must execute before the<body>, and if you're using any of the CSS classes that Modernizr adds, you'll want to prevent a FOUC.
将脚本标记放在
<head>HTML 的 中。为了获得最佳性能，您应该在样式表引用之后使用它们。我们建议将 Modernizr 放在头部的原因有两个：HTML5 Shiv（在 IE 中启用 HTML5 元素）必须在 之前执行<body>，并且如果您使用 Modernizr 添加的任何 CSS 类，您会想要防止 FOUC。
回答by Chris Adams
I would argue no: every script you place in the <head>will block rendering and further script execution. The only thing Modernizr does which musthappen in the <head>is the integrated html5shiv, which hacks HTML5 tag support into Internet Explorer 8 and earlier.
我会争辩说不：您放入的每个脚本<head>都会阻止渲染和进一步的脚本执行。Modernizr 所做的唯一一件事必须发生在<head>集成的html5shiv 中，它将 HTML5 标签支持破解到 Internet Explorer 8 及更早版本中。
I was testing this yesterdayand found this to be fairly significant – on the site I work on, which is already fairly well optimized, adding that single script to the head delayed my load-time by ~100ms in IE9, which doesn't even benefit from the shiv!
我昨天测试了这个，发现这相当重要——在我工作的网站上，它已经得到了很好的优化，在 IE9 中将单个脚本添加到头部延迟了我的加载时间约 100 毫秒，这甚至没有受益于 shiv！
Since around 90% of my traffic comes from browsers which natively support HTML5 and I don't have core CSS which requires the modernizr classes to display correctly on the initial render, I'm using this approach which places the html5shiv into a conditional comment and loads modernizr without the integrated shim:
由于我大约 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>
回答by David Murdoch
Paul Irish is now suggesting that for > 75% of sites, there is no benefit to placing Modernizr in the head.
Paul Irish 现在建议对于超过 75% 的网站，将 Modernizr 放在head.
Move Modernizr to the bottom
It has more potential to introduce unexpected situations, however it's much better for the user to just have no scripts up in the head at all.
I bet >75% of sites dont need it in the head. I'd rather change this default and educate the 25% than watch as we slow down all these sites.
将 Modernizr 移到底部
它更有可能引入意外情况，但是对于用户来说，完全没有脚本会更好。
我敢打赌，> 75% 的网站根本不需要它。我宁愿更改此默认设置并教育 25%，也不愿看着我们放慢所有这些网站的速度。
回答by redfox05
How about using IE conditionals in a slightly different way? What does everyone think of this solution:
以稍微不同的方式使用 IE 条件怎么样？大家觉得这个方案怎么样：
Within the <head></head>tags:
在<head></head>标签内：
<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>
Before the end of the </body>tag:
</body>标签结束前：
<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>
This would result in Modernizr loading in the head for IE8 and below, and it will load before the body for any other browsers.
这将导致在 IE8 及更低版本的头部加载 Modernizr，并且它将在任何其他浏览器的主体之前加载。
Open discussion on pros and cons welcome in the comments.
欢迎在评论中公开讨论利弊。
