【问题标题】:A better conditional load test for ZeptoZepto 更好的条件负载测试
【发布时间】:2012-07-12 10:56:29
【问题描述】:

在不受支持的浏览器上使用 Zepto 并回退到 jQuery 是一种将移动设备的 JS 大小减少几 Kbs 的好方法。但是,当前的“推荐”条件负载测试:

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

是一种非常不可靠的方式来决定是否加载 Zepto 或 jQuery。一些不受支持的浏览器(包括较旧的移动浏览器)将通过此测试,但在运行 Zepto 时会出现问题。

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

【问题讨论】:

    标签: jquery mobile zepto


    【解决方案1】:

    这是一个棘手的问题。如果我们知道 Zepto 使用的每个特殊功能,白名单才会起作用。您可以为Array.prototype.forEachdocument.getElementsByClassNamewindow.JSON 等添加嗅探器,但您必须在代码中搜索您怀疑会导致缺陷或您已经看到导致缺陷的任何内容。一些不受支持的浏览器(例如 Opera Mobile)可能会通过,但这些浏览器可能会实际运行,即使它们不在官方支持的列表中。

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

    不过,让我向您提出一个问题。如果移动浏览器不支持 Zepto,那么您可能正在寻找一个较旧或不太健壮的浏览器(IE9 除外,这是一种特殊情况)。假设尝试加载像 jQuery 这样的大型复杂库会进一步降低用户体验,难道不是合理的吗?加载时间会很糟糕。如果你在做动画,重绘率会让人难以忍受。

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

    【讨论】:

    • 谢谢布赖恩。当然,我总是会以一种渐进增强的方式构建网站——但加载任何 JS 的基线截止值确实是一个单独的考虑因素。我绝对会确保功能较弱的设备获得无 JS 体验,但我真的希望确定我可以安全使用 Zepto 的基线(理想情况下通过功能检测)高于的功能设备与,为他们挤出更多的 Kbs。但是,我明白如果没有您建议的白名单方法,这可能无法实现。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-30
    • 1970-01-01
    相关资源
    最近更新 更多