使用 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的一部分压力.但是这样只是第一步--数据. 用户想看到 ...
随机推荐
- 【原创】StickHeaderListView的简单实现,解决footerView问题
1.前言: 前几天用了GitHub上se.emilsjolander.stickylistheaders这个组件,然后发现这个组件的listview不能添加footerView,加了footer后,滑 ...
- SQL30081N 检测到通信错误。正在使用的通信协议:"TCP/IP"
环境描述: 今天在虚拟机上安装了Linux系统,并且装了DB2,但是在连接的时候遇到了个问题,百思不得其解.下面是具体问题跟解决办法 问题描述: 解决办法: 1.先ping服务器是否可以ping通. ...
- Fragment+RadioButton实现点击切换页面效果
首先我们需要在主布局文件中 放一个 容器,方便让fragment加入进去,我们创建了四个Fragment,并用RedioButton实现了导航栏 MainActivity.java package c ...
- android开发系列之友盟统计集成
相比大家都遇到这种情况,当我们的app上线之后,我们想要实时的跟踪了解到app里面的bug情况.新增用户情况.用户相关的行为属性情况等.但是如果自己在app里面去开发集成这些功能,一方面开发工作量还挺 ...
- ORACLE SQL TUNING ADVISOR 使用方法
sql tunning advisor 使用的主要步骤: 1 建立tunning task 2 执行task 3 显示tunning 结果 4 根据建议来运行相应的调优方法 下面来按照这个顺序来实施 ...
- Oracle 12c 数据库中scott用户不存在的解决方法
-- 使用超级管理员登录CONN sys/change_on_install AS SYSDBA ;-- 创建c##scott用户CREATE USER c##scott IDENTIFIED BY ...
- golang的内存模型与new()与make()
要彻底理解new()与make()的区别, 最好从内存模型入手. golang属于c family, 而c程序在unix的内在模型: |低地址|text|data|bss|heap-->|unu ...
- String.split()方法你可能不知道的一面
一.问题 java中String的split()是我们经常使用的方法,用来按照特定字符分割字符串,那么我们看以下一段代码: public void splitTest() { String str = ...
- require.js的用法
我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文 ...
- java数据结构和算法------合并排序
package iYou.neugle.sort; public class Merge_sort { public static void MergeSort(double[] array, i ...