使用 polyfills 的简易方法
本文作者为 Andrew Betts 与 Robert Nyman。Andrew 是金融时报(Financial Times)实验室主任,该实验室旨在金融时报开发并推广实践性的 Web 技术。Robert 是 Mozilla Hacks 技术传道师及编辑。曾就 HTML5,JavaScript 以及 Open Web 发表过多次谈话与博文。Robert 坚定地看好 HTML5 与 Open Web,自1995年就开始在 Front End 开发部门研究 Web 技术。
本文系 OneAPM 工程师 编译呈现,以下为正文。
Polyfills是一种保证使用现代代码的绝佳办法,同时还能支持旧版浏览器。但是目前polyfills使用起来很困难,因此我们开发了一种全新的服务以便简化其使用方法。在此,邀请读者使用并改进它。
挑战
下面是我们正在尝试解决的一些问题:
开发者对哪些特性需要使用polyfill不是很清楚。例如你在某个旧版本的IE浏览器(因为你有很大数量的用户还在使用它)中载入网站,发现网站不工作,你不得不慢慢调试来搞清楚到底是哪个特性导致了这个问题。有时候问题很清楚,但大多时候并非如此,尤其是旧版浏览器往往缺少好的开发者工具的时候。
针对每个特性都有很多polyfill可供选择。很难确定哪一个能最忠实地模拟缺少的特性。
有一些大的polyfill捆绑着很多你不需要的polyfill,例如ES6,它全面覆盖了一系列的特性集。为了解决一个简单的问题而向浏览器植入所有的这些代码其实是不必要的。
较新版本的浏览器不需要polyfill,但一般来说polyfill可用于所有种类的浏览器。虽然这是为了提高与旧版浏览器的兼容性,但这也降低了新版浏览器的性能。我们不愿意做出这种妥协。我们更愿意在原本不具备某个特性的浏览器上使用polyfill。
我们的解决办法:以polyfill为服务
为了解决这些问题,我们开发了polyfill服务。这有点像是验光师先对你的眼睛验光检查,然后针对你的视力问题配置眼镜。我们将对浏览器做同样的事情。下面解释它是如何工作的:
开发人员在他们的页面中插入一个脚本标记作为导入polyfill服务的端点。
该服务分析浏览器的user-agent标头和必需特性列表(或是使用一个默认的可使用polyfill服务的列表),然后搭建浏览器所需的polyfill列表。
按照正确的依赖顺序表定制polyfill。
通过CDN 压缩服务包并提供服务(对此我们衷心感谢Fastly的支持)。
我们真的需要这个解决办法吗?你可以这样思考:Modernizris是一个大型的特性检测包,所有对它的合理使用都得益于自定义的安装配置,但是很大数量的Modernizris用户仅仅使用了它的默认安装,这常常是来自于 cdnjs.com 或是html5boilerplate 的某个部件。但是,如果不使用Modernizris的特性检测功能,那你为什么安装这个工具呢?可能你误解了库文件的功能,单纯地以为Modernizris会“修补东西”?不得不承认,第一次听到这个名字的时候笔者正是这样想的,以至于后来发现Modernizris不但没有起到作用,反而拖了现代浏览器的后腿,笔者感到有些失望。
然而,Polyfill服务却是真正起到了作用。不想花时间去深入了解旧版本浏览器缺点的你一点儿错也没有。让别人先弄明白问题所在,然后我们在不需要了解细节的情况下就能直接受益。
如何使用
最简单的使用情况是:
<script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>
这包含了我们默认的 polyfill设置。这个默认设置是我们人工挑选的一个特性列表,我们认为这个列表中所包含的特性对于现代网络开发来说不可或缺,而且相对应的polyfill相当小且十分精确。如果你想指定添加某个polyfill特性,只需要这么做:
<!-- Just the Array.from polyfill -->
<script src="//cdn.polyfill.io/v1/polyfill.min.js?features=Array.from" async defer></script>
<!-- The default set, plus the geolocation polyfill -->
<script src="//cdn.polyfill.io/v1/polyfill.min.js?features=default,Navigator.prototype.geolocation" async defer></script>
如果有必要在解析自己的代码之前加载polyfill的话,你可以移除async和defer属性,或是使用一个脚本加载器(不需要任何polyfill的加载器!)
测试与文档特性支持
我们所支持特性的完整表格在特性矩阵中。为了搭建这个网格,我们使用了Sauce Lab的自动测试平台,它截获了polyfill在每个浏览器中的测试,然后记录结果。
User-Agent 分析? 你确定?
是的,我们确定。下面是为什么UA分析要比特性检测好的原因:
在一些情形中,针对同一特性我们有多个polyfill可供选择,这是因为一些浏览器提供非顺从实施方式,因此只需要你敲打成型即可,而其他浏览器则没有提供任何的实施。但若是有UA检测,你能够选择相应的polyfill。
有了UA检测,第一个HTTP请求就能直接由polyfill代码应答。如果我们使用了特性检测,第一个请求将会为特性检测代码服务,而第二个请求则需要用于获取特定的polyfill。
几乎所有的大型网站都使用UA检测。这并不是说与之相关的特征就是不好的。显然,好的UA规则要比差劲的UA规则更难编写。而且我们并没有排除借助特性检测使用该服务的可能。
人人可用的服务
应用的服务部分由FT负责维护运营,我们也正不断地扩展和改进相关工具,文档,测试和服务特性。源代码可以在GitHub上上下载,因此你能轻易地自行配置服务,我们也在cdn.polyfill.io上面配置了一个实例服务,你可以免费使用。而且,Fastly的朋友正提供免费的CDN发布和SSL。
我们已经建好了平台。现在,我们需要社区的力量让它火起来。我们已经提供了一些来自Jonathan Neal, Mathias Bynens等人的最佳polyfill服务,我们想要做得更加全面。请带上你的polyfill,帮助我们改进测试,让它成为能推动网络前行的一项资源吧。
OneAPM 助您轻松锁定 Node.js 应用性能瓶颈,通过强大的 Trace 记录逐层分析,直至锁定行级问题代码。以用户角度展示系统响应速度,以地域和浏览器维度统计用户使用情况。想阅读更多技术文章,请访问 OneAPM 官方博客。
本文转自 OneAPM 官方博客
原文地址:https://hacks.mozilla.org/2014/11/an-easier-way-of-using-polyfills/
使用 polyfills 的简易方法的更多相关文章
- javascript统计输入文本的简易方法
计算文本框的输入字符数的简易方法: ]; var tValue = text.value; num = Math.ceil(getLength(tValue)/); //正则:用于区分中文为两个字节 ...
- linux下测试磁盘的读写IO速度-简易方法
linux下测试磁盘的读写IO速度-简易方法 参考资料:https://blog.csdn.net/zqtsx/article/details/25487185 一:使用hdparm命令 这是一个是用 ...
- [转]制作png格式透明图片的简易方法
原文地址:http://blog.csdn.net/zhouyingge1104/article/details/24460743 photoshp之类的专业软件太复杂,其实,制作透明图标有比较简易的 ...
- Centos7 安装pyquery 等包的简易方法
单独下载安装模块: sudo mkdir /home/pythonmodule sudo wget https://www.crummy.com/software/BeautifulSoup/bs ...
- 在Android中,使用Kotlin的 API请求简易方法
原文标题:API request in Android the easy way using Kotlin 原文链接:http://antonioleiva.com/api-request-kotli ...
- 将meteor部署在自己服务器上的简易方法
有meteor-up等众多工具,如果你不喜欢它们,可以尝试如下方法,自由控制. 1,创建及打包项目 meteor create newapp meteor build . 2,上传 将bunder.t ...
- 用JS获取地址栏中的参数的简易方法
这个方法用起来超级简单,传入参数即可直接获取地址栏中的参数 代码如下 function GetQueryString(name) { var reg = new RegExp("(^|&am ...
- C# 取Visio模型信息的简易方法
最近的一个项目,要求导出Visio图纸,因为是建筑类的,所以,需要设置墙壁,门,房间等信息的参数. 拿墙壁为例,选中墙壁模型,右键属性,会弹出以下对话框. 需要设置墙长.墙壁厚度等一些列信息. 现在C ...
- 关于OELD屏显示电池电量的简易方法
如何采集电源电压大家可能都熟悉,stm32的ADC+DMA能很方便迅速的帮我们采集到自己想要的电压数据.使用DMA进行数据搬运也能很好的减轻CPU的一部分压力.但是这样只是第一步--数据. 用户想看到 ...
随机推荐
- Autofac的注入和web.config配合
public static void BuildMvcContainer() { var builder = new ContainerBuilder(); var assemblys = AppDo ...
- webpack 学习笔记 01 使用webpack的原因
本系列文章实际上就是官网文档的翻译加上自己实践过程中的理解. 伴随着websites演化至web apps的过程,有三个现象是很明显的: 页面中有越来越多的Js. 客户端能做的事情越来越多. 越来越少 ...
- jQuery无缝滚动插件
插件代码 ;(function ($) { // jQuery marquee 插件 $.fn.marquee = function (options) { // 默认设置 var defaults ...
- Swift Explore - 关于 Swift 中的 isEqual 的一点探索
在我们进行 App 开发的时候,经常会用到的一个操作就是判断两个对象是否相等.比如两个字符串是否相等.而所谓的 相等 有着两层含义.一个是值相等,还有一个是引用相等.如果熟悉 Objective-C ...
- MongoDB学习笔记-游标
理解MongoDB的游标有两种维度:客户端和服务器端.下面将从这两方面来说明. 客户端 find方法返回值是一个游标.可以通过游标来对最终结果进行控制.比如限制结果数量,略过某一部分,根据任意键按任意 ...
- 使用NPOI完成导出Excel文件
参考网址:http://blog.csdn.net/tiemufeng1122/article/details/6732588 能够实现 点击按钮弹出下载框 的功能,如图: HTML代码: & ...
- 安装MSITVPN连接的时候弹出:需要(未知)上的文件'MSITVPN.bmp。
使用 msitvpn 连接microsoft 公司内网,在安装msitvpn的时候突然弹出一个对话框提示需要msitvpn.bmp 文件,找了很久都没找到解决问题方案. 最后只能猜测是不是和用户的权限 ...
- EF简单的增删查改
Add /// <summary> /// /// </summary> public void Add() { TestDBEntities2 testdb = new Te ...
- homework-05 大家一起玩游戏~
046 195 1.接口设计 客户端 用户登录后,启动一个线程来进行游戏,等待服务器信息及发送新数据 服务器 开始时,主程序一直等待用户登录,有新用户登录就开一个线程去为其服务 等到用户都登录完成 ...
- ubuntu 10.04 fcitx 4.12 实现按下shit切换输入法同时提交英文输入
安装: echo "add fcitx ppa..." sudo apt-add-repository ppa:fcitx-team/nightly sudo apt-get in ...