文档章节

使用 polyfills 的简易方法

OneAPM蓝海讯通
 OneAPM蓝海讯通
发布于 2016/04/15 12:10
字数 1839
阅读 65
收藏 0

本文作者为 Andrew BettsRobert 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服务。这有点像是验光师先对你的眼睛验光检查,然后针对你的视力问题配置眼镜。我们将对浏览器做同样的事情。下面解释它是如何工作的:

  1. 开发人员在他们的页面中插入一个脚本标记作为导入polyfill服务的端点。

  2. 该服务分析浏览器的user-agent标头和必需特性列表(或是使用一个默认的可使用polyfill服务的列表),然后搭建浏览器所需的polyfill列表。

  3. 按照正确的依赖顺序表定制polyfill。

  4. 通过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 NealMathias Bynens等人的最佳polyfill服务,我们想要做得更加全面。请带上你的polyfill,帮助我们改进测试,让它成为能推动网络前行的一项资源吧。

OneAPM 助您轻松锁定 Node.js 应用性能瓶颈,通过强大的 Trace 记录逐层分析,直至锁定行级问题代码。以用户角度展示系统响应速度,以地域和浏览器维度统计用户使用情况。想阅读更多技术文章,请访问 OneAPM 官方博客本文转自 OneAPM 官方博客 原文地址:https://hacks.mozilla.org/2014/11/an-easier-way-of-using-polyfills/

© 著作权归作者所有

OneAPM蓝海讯通
粉丝 94
博文 631
码字总数 1266889
作品 0
海淀
私信 提问
Web组件构建框架--Polymer

在2013年的Google I/O大会上,Google发布了Polymer,它是一个使用Web组件构建Web应用的类库,同时也使用了为Web构建可重用组件的新的HTML 5标准。Polymer为大部分Web组件技术提供了polyfills...

匿名
2013/06/03
19.3K
1
Polymer 1.0.0 发布,Web 组件构建框架

Polymer 1.0.0 发布,自从 0.5 开发者预览版发布以后,Polymer 主要关注跨浏览器性能,对开发者更友好。新的库在 Chrome 比之前快 3x,在 Safari 快 4x,而且代码量比之前的开发者预览版还少...

oschina
2015/06/03
2.7K
5
《编写可维护的 JavaScript》读书笔记第11章:不是你的对象不要动

什么是你的 只要维护代码是你的责任,那么你就拥有这些对象。 如果你的代码没有创建这些对象,不要修改它们,包括: 原生对象(Object、Array 等) DOM 对象(例如,document) 浏览器对象模...

张前程
2013/12/24
26
0
demo04 webpack + babel7

1.关于 babel 7 版本 babel 7 于 2018 年 8 月份发布,在 babel 7 中,所有官方包更名为以 @babel 为开头,并且 babel 7 推荐使用 babel.config.js 来配置 babel 。 关于 babel 7 的重大改变,...

SimpleXD
05/25
0
0
使用 HTML5 Canvas实现移动平台动画(游戏)的一些痛点和思路

前言 最近一直在做一些HTML5 Canvas加速方面的事情,HTML5已经出来相当长一段时间,各浏览器厂商也基本上已经支持!从目前来看,HTML5的大规模普及还是雷声大,雨点小;但从长远来看,HTML5...

小云栖
2016/01/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
昨天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
昨天
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部