Modernizr文件应该放在头部吗?
Modernizr JavaScript文件的引用是否应该在页面的头部? 我总是尝试将所有脚本放在页面底部,并希望保留这一点。 如果它需要在头上,为什么?
如果你想让Modernizr尽快下载并执行,以防止FOUC ,把它放在<head>
从他们的安装指南 :
将脚本标签放在HTML的
<head>
中。 为了获得最佳性能,应该在样式表引用之后跟随它们。 我们推荐将Modernizr放在头上的原因有两方面:HTML5 Shiv(在IE中启用HTML5元素)必须在<body>
之前执行,如果您使用Modernizr添加的任何CSS类,我想要阻止一个FOUC。
我会争辩说:你放在<head>
中的每个脚本都会阻止渲染并进一步执行脚本。 Modernizr在<head>
唯一要做的就是集成的html5shiv ,它将HTML5标签支持转移到Internet Explorer 8及更早版本。
我昨天正在testing这个 ,发现这是相当重要的 – 在我工作的网站上,这个网站已经很好的优化了,增加了一个单一的脚本,将IE9的加载时间延迟了大约100ms,甚至没有从shiv受益!
由于大约90%的stream量来自本机支持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>
保罗·爱尔兰人现在认为,对于75%以上的网站来说,将Modernizr放在首位是没有好处的。
将Modernizr移动到底部
它有更多的潜力引入意想不到的情况,但是用户根本没有任何脚本。
我敢打赌,75%的网站不需要它的头。 我宁愿改变这个默认值,并教育25%的比看,因为我们放慢所有这些网站。
如何以稍微不同的方式使用IE条件? 每个人都认为这个解决scheme是什么:
在<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>
这会导致在IE8及以下版本中加载Modernizr,并且会在任何其他浏览器的主体之前加载。
公开讨论正反两方面的意见。