jquery - Zepto 更好的条件负载测试

Question

对于不支持的浏览器，使用 Zepto 并回退到 jQuery 是为移动设备减少几 Kb 的 JS 大小的好方法。但是，当前“推荐”的条件负载测试:

<script>document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js <\/script>')</script>

是决定是否加载 Zepto 还是 jQuery 的非常不可靠的方法。许多不受支持的浏览器(包括较旧的移动浏览器)将通过此测试，但在运行 Zepto 时会出现问题。

是否有更可靠的方法(最好使用特征检测而不是设备/浏览器嗅探)可以准确覆盖更大比例的浏览器？误报(即加载 jQuery 而不是 Zepto，即使 Zepto 实际上可以工作)肯定比误报更好。

Answer 1

这是一个棘手的问题。只有当我们了解 Zepto 使用的每个特殊功能时，白名单才会起作用。您可以为 Array.prototype.forEach、document.getElementsByClassName、window.JSON 等添加嗅探器，但您必须搜索您怀疑会导致缺陷或您发现会导致缺陷的任何内容的代码。一些不受支持的浏览器(例如 Opera Mobile)可能会通过，但这些浏览器可能实际上可以工作，即使它们不在官方支持的列表中。

最可靠的方法是尝试加载Zepto，然后检查window.Zepto是否存在，并查看是否存在类似$('#test ') 有效。如果没有，加载 jQuery。当然，这太疯狂了。

不过，让我问你一个问题。如果移动浏览器不支持 Zepto，您可能会选择较旧或功能较弱的浏览器(IE9 除外，这是一种特殊情况)。假设尝试加载像 jQuery 这样的大型复杂库会进一步降低用户体验，这不是合理的吗？加载时间会很糟糕。如果你做动画的话，重画率会让人难以忍受。

更好的方法是在可能的情况下将您的设计建立在渐进增强的原则之上。构建一个无需 JavaScript 即可运行的网站，然后使用 Zepto(如果支持)对其进行修饰。如果不可能，请考虑这些浏览器变得越来越不常见，并且实际上可能只代表您用户的一小部分。虽然我们使用这些浏览器至少两年了，但这比我们使用 IE6 的时间要少得多。