的迷茫，相信大家都用caniuse官网查询过一些css和js的兼容性问题，都受益于它反馈的兼容性数据，让我们的线上项目运行更稳定，和谐地存在于用户的计算机中。但是，我们可能会对caniuse页面上的某些细节感到困惑或模棱两可。今天，我们就带大家重新认识一下caniuse网站，探究一下它的原理和细节。1.1从babel-preset-env说起babel-preset-env是babel6中极力推荐的一个预设。preset代表了一个babel插件的集合，相当于一堆插件的统称。babel刚开始冲击国内的时候，es6标准很快就发布了，只需要在babelrc的配置中加入es2015这样的preset即可。但是随着es2016和es2017的出现，babelrc很快就会成为日历的集合。所以babel给出了envkiller，既避免了es20xx的出现，又可以结合caniuse的权威资料，让preset的配置科学简单。{"presets":[["env",{"targets":{"browsers":["last2versions","safari>=7"]}}]]}这是babel官方给出的env配置方案website,"last2versions","safari>=7",这两个条件是并集关系，babel会给出满足这两个条件的浏览器和版本，并合并，最后计算出一个集合浏览器和对应的最小版本数据。Babel是一个用来转换js语法的编译器。为什么还知道满足env条件的浏览器和版本呢？这从browserslist库开始。1.2Browserslist库不仅在babel-preset-env中使用，像autoprefixer等知名库也使用它。last1version>1%maintainednodeversionsnotdeadbrowserslist可以将上述类似于人类语言的配置转化为一组浏览器。但其主要职责是对上述配置内容进行改造，根据规则过滤出正确的浏览器列表内容，其自身不提供浏览器列表的来源。1.3caniuse-liteBrowserslist的浏览器数据源是这个caniuse-lite，是caniuse-db库的简化版，由caniuse-db库派生而来，只是caniuse-db数据按照一定的规则进行了简化.它大大减少了库的大小，并提供了一些查询API供其他人使用。每当caniuse-db更新时，也会一起发布一个版本。1.4caniuse-dbcaniuse的npm包提供了caniuse网站查询所需的所有数据。2.caniuse库介绍。caniuse-db的github地址在这里。Caniuse鼓励大家在github上提交pr。经过审核后，他们可以被聘用到其官方数据库中。2.1如何向caniuse贡献数据首先，它为我们准备了sample-data.json文件。按照这个文件格式，填写需要添加的特性名称、介绍和浏览器兼容性，保存后放入features-json文件夹，最后提交pullrequest即可，审核完成后，这部分新特性会自动保存在data.json中。data.json是caniuse官方的数据库导出文件，供其他库调用。每次json文件发生变化，都会发布一个新版本。2.2sample-data.json作为新特性发布的样例文件，内容如下：{"title":"Sampletitle","description":"Sampledescription","spec":"http://example.com/path/to/spec.html","status":"wd","links":[{"url":"http://example.com/path/to/link.html","title":"链接title"}],"bugs":[{"description":"示例错误描述"}],"categories":["CSS"],"stats":{"ie":{..."11":"u"},"edge":{..."18":"u"},"firefox":{..."67":"u"},"chrome":{..."75":"u"},"safari":{..."TP":"u"},"opera":{..."58":"u"},"ios_saf":{..."12.2":"u"},"op_mini":{"all":"u"},"android":{..."67":"u"},"bb":{"7":"u","10":"u"},"op_mob":{..."46":"u"},"and_chr":{"71":"u"},"and_ff":{"64":"u"},"ie_mob":{..."11":"u"},"和_uc":{"11.8":"u"},"samsung":{..."8.2":"u"},"and_qq":{"1.2":"u"},"baidu":{"7.12":"u"}},"notes":"功能注释示例，在此处解释部分支持","notes_by_num":{"1":"第一个注释..."},"usage_perc_y":0,"usage_perc_a":0,"ucprefix":false,"parent":"parentfeatureid","keywords":"example,keywords","shown":false,"ie_id":"","chrome_id":"","firefox_id":"","webkit_id":""}简单介绍几个关键字段：（1）title：功能名称（2）description：功能介绍（搜索时的关键词）（3）spec：跳转到详细介绍页面（4)links:扩展内容介绍(5)keywords:搜索时的关键词(6)status:featureinthestandard的状态ls-standardrec-W3Crecommendedpr-W3Crecommendedcr-W3Ccandidatewd-W3Cmanuscriptother-non-W3C，可是流行的unoff-unofficial(7)分类：分类HTML5SSSSSS2CSS3SVGPNGJSAPICanvasDOMOtherJSSecurity从以上分类可以看出caniuse不仅仅是一个查询css兼容性的网站。如果想查看caniuse目前支持多少特性，以及特性对应的分组信息，可以点这个网址。(8)stats:Browsersupportforfeaturesy-(Y)es,默认支持fullysupporteda-(A)lmostsupported(akaPartialsupport)partiallysupportedn-(N)osupport,ordefaultdisabledbydefaultp-No支持，但有(P)olyfill不支持，但有替代方案u-支持(u)unknownunknownx-需要prefi(x)工作需要前缀d-(D)默认启用（需要启用标志或其他东西)需要输入flag'#n'-其中n为数字，从1开始，对应notes_by_num个音符。支持请看介绍n(9)stats:browserlistieedgefirefoxchromesafarioperaios_safop_miniandroidbbop_moband_chrand_ffie_moband_ucsamsungand_qqba以上浏览器列表是固定的，用户不能添加和缺少某个浏览器类型。总结每当添加新功能时，都必须测试上面的浏览器列表和对应版本列表。下面两个官方推荐的网站https://www.browserstack.com和http://saucelabs可以用来做特性测试.com。对于第二个网站，可以用来修复因浏览器兼容性导致的生产事故。具体浏览器版本的实际测试是在网站的虚拟机中完成的。测试完成后可以观看操作视频，支持导出功能。这对技术解决了兼容性问题，提供了第一现场操作流程，方便了问题的解决。3.Caniuse网站介绍3.1主页面介绍页面有4个地方用红色标记（1）表示这个介绍框的内容属于一个feature，也就是我们在features-json中看到的features相关的文件，有是no#标志不是功能的一部分。(2)表示此功能在标准中的状态。具体可以参考上面sample-data.json的介绍。(3)对于这个特性，全球和中国的所有浏览器有多少种完全支持和部分支持？，将两部分值相加得到总份额。(4)Browserbaseline，表示浏览器当前状态对应的版本号。Baselineup是浏览器的低版本，合并具有相同支持状态的版本。基线是三个版本，状态是合并的。3.2浏览器信息统计Caniuse关于浏览器的数据主要来自statcounter。本网站统计了全球和各个国家的浏览器使用情况。上面提到的浏览器基线和版本号列表是根据statcounter上个月的统计数据得出的。比如chromev73是3月12日发布的，但是在caniuse网站上，v72依然是当前版本，因为caniuse的分析数据来自2月份的统计数据，数据并不是实时更新的。3.3详情页红色标出的4个地方(1)浏览器支持相同特性的版本范围(2)特性支持(3)Firefox40-Firefox64发布时间(4)Firefox40-Firefox64,Globaland中文用法分享4.思考知道了caniuse的数据来源和原理后，是否可以搭建自己公司的caniuse，暂且称之为caniuse-shein(1)目前我司前端只负责中后台系统，目标用户群有限。而我有一个专门为公司前端搭建的APM项目，里面有详细的浏览器版本和分享数据。结合APM项目中的浏览器数据和caniuse的特征数据，我们可以创建一个类似于caniuse官网的特征查询分析页面，但是报表数据只关心我们用户群使用的浏览器，不关心以全球或国家为基础。(2)babel-preset-env插件也可以结合caniuse-shein的资料，给出浏览器对应的babel插件列表，共享海量HC，快速投放。请扫描下图获取所有职位列表2.另外，想了解更多招聘信息的同学也可以加我微信stoneyAllen
