一页上有两个 Modernizr 实例

Question

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

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

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

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

然后，还有 pointer/touch 支持之类的东西，它们不会影响布局本身，更多地与交互有关 - 所以他们可以等待。

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

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

Answer 1

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

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

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

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

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

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

Two instances of Modernizr on one page