一页上有两个 Modernizr 实例

Question

我目前正在尝试对我的一个网站进行一些速度改进，并且正在研究 Modernizer 的使用情况。

以前我所有的 javascript（包括 Modernizer）都集中在一个大的 js 文件中。我现在已经删除了 Modernizer，它位于页面的 head 部分。为清楚起见，它是自定义构建。

但是，并非所有特征检测都是平等的 - 一些特征受益于快速检测，而另一些则可以等待。

例如，检测 webp 支持非常重要，因为我假设下载一个 jpeg 然后另一个 webp 版本会破坏该功能的对象。

然后，还有诸如指针/触摸支持之类的东西，它们不会影响布局本身，而是更多地与交互有关 - 所以他们可以等待。

考虑到这一点，显而易见的事情是在页面中放置两个 Modernizer 实例 - 一个用于顶部的重要内容，另一个用于底部的其余内容。

但是，我一直无法找到有关此主题的任何内容。我想这让我问了两个问题：这可能吗？如果是的话——这是一个明智的想法吗？

Answer 1

绝对可以在一个页面上有两个 Modernizr 实例；但是为了拥有它，您必须手动将全局对象重命名为其他对象，因为 Modernizr 直接暴露于窗口：

    e.Modernizr = Modernizr // e is internal ref. to window object
}(window, document);

然而，这可能被认为是一个脏补丁，因为您必须更改生产代码（并通过手动更新周期来维护该更改），下载并执行两次完全相同的基本功能，这是不太理想的。

另一种方法是立即构建第一批（基本）测试所需的所有内容，而不是稍后使用Modernizr.addTest（它必须包含在构建中）用于非必要功能。

Source and doc-like comments.

当然，您必须编写测试。您可以转达官方的 Modernizr 测试，但在 Modernizr 的工厂方法之外调用的 addTest 缺少一些有用的方法（例如，Modernizr 的内部 createElement() 之类的东西）。

您必须做出选择，因为随后无法立即添加其他测试。