异步 modernizr 可以吗？

Question

Google PageSpeed 测试告诉我使用 async

例如变化

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

到

<script async src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

modernizer 还能正常工作吗？

Answer 1

Modernizr 需要放在 <head> 中，原因有两个：

html5shiv 需要用于 oldIE。
在使用 modernizr-placed 类时避免 FOUC 特征条件样式

您可以使用异步属性 and/or 如果这些对您都不重要，请将其放在底部。

看看这个问题发在Modernizr

Answer 2

Modernizr 不需要放在<head>.

Modernizr 最终会在您包含它时正常工作。

如果您制作 modernizr 脚本 async，或者在一些重要的页面加载事件（DOMContentLoaded、window.onload...）之后包含它

特定 css 规则的应用（文档 head 中的 feature、no-feature 类）将延迟.
window.Modernizr 的可用性及其对象属性（即 Modernizr.propery）也将被延迟

简而言之，

如果你使用 async 加载 Modernizr 是不正确的样式（依赖于 <html> 类的样式），你的 CSS 可能会发生不好的事情一段时间
你的 JS 代码可能发生的坏事是，如果你使用 Modernizr 全局对象，你可能不会直接使用它，因为它可能会加载也可能不会加载 - 你将不得不以某种方式等待它。所以，没有了：

if(Modernizr.cssanimations){
    // your feature-dependant code
}

而是：

if(typeof Modernizr !== "undefined"){
//uitilize Modernizr global object here
} else {
// implement waiting for this object, let's say write short onModernizrLoad() function...
}

异步 modernizr 可以吗？

Is it okay to async modernizr?

javascript

performance

asynchronous

modernizr