当前位置：文江博客话题详情

JavaScript Modernizr html-head

Modernizr 文件应该放在 head 中吗？

发布于 2024-11-14 12:11:33 字数 87 浏览 7 评论 0 原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青朷 2024-11-21 12:11:33

如果您希望Modernizr尽快下载并执行，以防止FOUC，将其放入

来自他们的安装指南：

将脚本标签拖放到中
你的 HTML。为了获得最佳性能，您
应该让他们跟随你
样式表参考。原因我们
建议将 Modernizr 放置在
头部有两个部分：HTML5 Shiv（即
在 IE 中启用 HTML5 元素）必须
在之前执行，并且如果
您正在使用任何 CSS 类
Modernizr 补充道，你会想要
防止 FOUC。

回复收藏 0 原文

書生途 2024-11-21 12:11:33

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

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

由于我大约 90% 的流量来自原生支持 HTML5 的浏览器，并且我没有核心 CSS（需要 Modernizr 类在初始渲染上正确显示），因此我使用这种方法，将 html5shiv 放入条件注释中，在没有集成垫片的情况下加载现代化：

<html>
    <head>
        …
        <!--[if lt IE 9]>
            <script src="html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        …
        <script src="modernizr.custom.min.js"></script>
    </body>
</html>

I would argue no: every script you place in the <head> will block rendering and further script execution. The only thing Modernizr does which must happen in the <head> is the integrated html5shiv, which hacks HTML5 tag support into Internet Explorer 8 and earlier.

I was testing this yesterday and 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!

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:

<html>
    <head>
        …
        <!--[if lt IE 9]>
            <script src="html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        …
        <script src="modernizr.custom.min.js"></script>
    </body>
</html>

回复收藏 0 原文

獨角戲 2024-11-21 12:11:33

保罗·爱尔兰现在建议对于> 75% 的网站将 Modernizr 放在 head 中没有任何好处。

将 Modernizr 移至底部

它更有可能引入意外情况，但是对于用户来说，头脑中根本没有脚本会更好。

我敢打赌，超过 75% 的网站在头脑中不需要它。我宁愿更改此默认设置并教育 25%，也不愿看着我们减慢所有这些网站的速度。

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

回复收藏 0 原文

执手闯天涯 2024-11-21 12:11:33

以稍微不同的方式使用 IE 条件怎么样？
大家觉得这个解决方案怎么样：

在标签内：

<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>

在标签结束之前：

<!--[if gt IE 8]><!-->
<script src="/path/to/modernizr.js"></script>
<!--<![endif]-->
</body>

这会导致在 Modernizr 中，对于 IE8 及以下版本，它会在 header 中加载，对于任何其他浏览器，它将在 body 之前加载。

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

How about using IE conditionals in a slightly different way?
What does everyone think of this solution:

Within the <head></head> tags:

<!--[if lt IE 9 ]>
<script src="/path/to/modernizr.js"></script>
<![endif]-->
</head>

Before the end of the </body> tag:

<!--[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.

Open discussion on pros and cons welcome in the comments.

回复收藏 0 原文

~没有更多了~

关于作者

苯莒

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

Modernizr 文件应该放在 head 中吗？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

alipaysp_snBf0MSZIv

梦断已成空

瞎闹

凯凯我们等你回来

寄意

似梦非梦

友情链接

Modernizr 文件应该放在 head 中吗？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

alipaysp_snBf0MSZIv

梦断已成空

瞎闹

凯凯我们等你回来

寄意

似梦非梦

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。