摘要：代表這個(gè)特性在標(biāo)準(zhǔn)中所處的一個(gè)狀態(tài)具體參照前文對的介紹對于這個(gè)特性，在全球中國所有瀏覽器中，分別有多少完全支持和部分支持，把兩部分值加起來，得到總份額。

相信大家都曾用caniuse網(wǎng)站查詢過css、js的一些兼容性問題，并且都從它反饋的兼容性數(shù)據(jù)中獲益，讓我們的線上項(xiàng)目更加穩(wěn)定、和諧的跑在用戶電腦里。不過對于caniuse頁面上的一些細(xì)節(jié)，我們可能會(huì)感到困惑或者模棱兩可，今天就帶著大家一起來重新認(rèn)識caniuse這個(gè)網(wǎng)站，并對它的原理和細(xì)節(jié)做些探究。

babel-preset-env是babel6中極力推崇的一個(gè)preset，preset代表的是babel plugins的一個(gè)集合，相當(dāng)于一堆plugins的一個(gè)統(tǒng)稱。在babel最開始打江山的時(shí)候，es6標(biāo)準(zhǔn)也發(fā)布不久，babelrc的配置中只需要添加es2015這樣的preset。但隨著es2016、es2017的相繼出現(xiàn)，babelrc很快就會(huì)變成一堆掛歷式的集合體。所以babel給出了env這個(gè)殺器，既避免了es20xx的出現(xiàn)，又可以與caniuse的權(quán)威數(shù)據(jù)融合，讓配置preseet科學(xué)而簡單。

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

這是babel官網(wǎng)給出的env配置方案，"last 2 versions", "safari >= 7"，這兩個(gè)條件是并集的關(guān)系，babel將會(huì)分別給出滿足這兩個(gè)條件的瀏覽器及版本，并會(huì)進(jìn)行合并，最后算出一組瀏覽器及對應(yīng)最低版本的數(shù)據(jù)。

babel是用來轉(zhuǎn)換js語法的一個(gè)編譯器，為什么還能知道滿足env條件的瀏覽器跟版本，這要從browserslist這個(gè)庫說起.

這個(gè)庫不僅僅用在babel-preset-env中，像autoprefixer這樣知名的庫，也是用到了它。

last 1 version
> 1%
maintained node versions
not dead

browserslist能夠把上面近似于人類語言的配置，轉(zhuǎn)換成一組瀏覽器集合。不過它的主要職責(zé)就是轉(zhuǎn)化上面的配置內(nèi)容，按照正則過濾出正確瀏覽器列表內(nèi)容，而它本身不提供瀏覽器列表的來源。

Browserslist的瀏覽器數(shù)據(jù)來源就是這個(gè)caniuse-lite，而它是caniuse-db庫的精簡版本，是從caniuse-db庫衍化而來，只不過對caniuse-db數(shù)據(jù)按照一定規(guī)則做了簡化，使得庫的大小減少了許多，并且提供一些查詢api供他人使用，每當(dāng)caniuse-db更新時(shí)，也會(huì)跟著一起發(fā)布版本。

caniuse的npm包，提供了caniuse網(wǎng)站查詢所需的所有數(shù)據(jù)。

caniuse-db的github地址在此，caniuse鼓勵(lì)大家去github上提交pr，經(jīng)過審核之后就可以被錄用到它的官方數(shù)據(jù)庫中。

首先，它為我們準(zhǔn)備了sample-data.json文件，按照此文件格式把需要增加的特性名稱、介紹和瀏覽器兼容性情況填寫清楚，保存并放到features-json文件夾中，最后提交pull request即可，審核完畢后會(huì)自動(dòng)把這部分新增特性保存到data.json中。data.json就是caniuse官方的數(shù)據(jù)庫導(dǎo)出文件，供其他庫調(diào)用，每次json文件變化后，都會(huì)release一個(gè)新版本。

作為新特性發(fā)布的樣本文件，內(nèi)容如下：

{
  "title":"Sample title",
  "description":"Sample description",
  "spec":"http://example.com/path/to/spec.html",
  "status":"wd",
  "links":[
    {
      "url":"http://example.com/path/to/link.html",
      "title":"Link title"
    }
  ],
  "bugs":[
    {
      "description":"Sample bug 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"
    },
    "and_uc":{
      "11.8":"u"
    },
    "samsung":{
      ...
      "8.2":"u"
    },
    "and_qq":{
      "1.2":"u"
    },
    "baidu":{
      "7.12":"u"
    }
  },
  "notes":"Sample notes for feature, explain partial support here",
  "notes_by_num":{
    "1":"First note..."
  },
  "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":""
}

簡要介紹下其中的幾個(gè)關(guān)鍵字段：

（1）title：特性名稱
（2）description：特性介紹（搜索時(shí)的關(guān)鍵字）
（3）spec：跳轉(zhuǎn)到詳細(xì)介紹頁面
（4）links：拓展內(nèi)容介紹
（5）keywords：搜索時(shí)的關(guān)鍵字
（6）status：特性在標(biāo)準(zhǔn)中的狀態(tài)

ls - 標(biāo)準(zhǔn)

rec - W3C 推薦

pr - W3C 建議

cr - W3C 候選

wd - W3C 手稿

other - 非W3C, 但流行的

unoff - 非官方

（7）categories：分類

HTML5

CSS

CSS2

CSS3

SVG

PNG

JS API

Canvas

DOM

Other

JS

Security

從上面分類可以看出，caniuse并不只是一個(gè)查詢css兼容性的網(wǎng)站。

如果想查看目前caniuse已經(jīng)支持了多少種特性，以及特性對應(yīng)的分組信息，可以點(diǎn)擊這個(gè)網(wǎng)址。

（8）stats：瀏覽器對特性的支持情況

y - (Y)es, supported by default 完全支持

a - (A)lmost supported (aka Partial support) 部分支持

n - (N)o support, or disabled by default 不支持

p - No support, but has (P)olyfill 不支持，但有替代方案

u - Support (u)nknown 未知

x - Requires prefi(x) to work 需要加前綴

d - (D)isabled by default (need to enable flag or something)需要打flag

"#n" - Where n is a number, starting with 1, corresponds to the notes_by_num note. 支持，請看介紹第n條

（9）stats：瀏覽器列表

ie

edge

firefox

chrome

safari

opera

ios_saf

op_mini

android

bb

op_mob

and_chr

and_ff

ie_mob

and_uc

samsung

and_qq

baidu

以上瀏覽器列表是固定的，用戶不能增加和缺少某個(gè)瀏覽器類型。

總結(jié)

每當(dāng)增加一個(gè)新特性時(shí)，都要對以上瀏覽器列表以及對應(yīng)版本列表進(jìn)行實(shí)測，特性的測試可使用以下兩個(gè)官方推薦的網(wǎng)站https://www.browserstack.com 和 http://saucelabs.com。
對于第二個(gè)網(wǎng)站，可用于因?yàn)g覽器兼容性造成生產(chǎn)事故的還原測試，在其網(wǎng)站的虛擬機(jī)內(nèi)完成特定瀏覽器特定版本的實(shí)測，在測試完成后可以觀看操作視頻，并支持導(dǎo)出功能，這對技術(shù)解決兼容性問題，提供了第一現(xiàn)場的操作流程，方便問題的解決。

頁面紅字標(biāo)注了4個(gè)地方
（1）代表了這個(gè)介紹框的內(nèi)容隸屬于一個(gè)特性，也就是我們在features-json看到的一個(gè)個(gè)跟特性相關(guān)的文件，沒有#標(biāo)志的不屬于特性。
（2）代表這個(gè)特性在標(biāo)準(zhǔn)中所處的一個(gè)狀態(tài),具體參照前文對sample-data.json的介紹
（3）對于這個(gè)特性，在全球、中國所有瀏覽器中，分別有多少完全支持和部分支持，把兩部分值加起來，得到總份額。
（4）瀏覽器基線，代表對應(yīng)瀏覽器current狀態(tài)的版本號。基線往上是該瀏覽器的低版本，并對相同支持情況的版本進(jìn)行合并。基線往下是未來的三個(gè)版本，并進(jìn)行狀態(tài)合并。

caniuse關(guān)于瀏覽器的數(shù)據(jù)，主要都來源于statcounter，此網(wǎng)站統(tǒng)計(jì)了全球以及各國的瀏覽器使用情況。

上面提到的瀏覽器基線及版本號列表，都是基于statcounter上個(gè)月份的數(shù)據(jù)統(tǒng)計(jì)。
例如chrome v73在3月12號發(fā)布了版本，但在caniuse網(wǎng)站里，v72還是作為了current版本，就是因?yàn)閏aniuse的分析數(shù)據(jù)來源于2月份的統(tǒng)計(jì)數(shù)據(jù)，數(shù)據(jù)并不是實(shí)時(shí)更新。

頁面紅字標(biāo)注了4個(gè)地方
（1）瀏覽器對特性支持情況相同的版本區(qū)間
（2）對特性的支持情況
（3）火狐40-火狐64的發(fā)布時(shí)間
（4）火狐40-火狐64，在全球、中國的使用份額

知道了caniuse的數(shù)據(jù)來源及原理之后，我們是否可以打造屬于自己公司的caniuse，暫且就叫做caniuse-shein

（1）
目前，我司的前端只負(fù)責(zé)中后臺系統(tǒng)，面向的用戶群體有限。
而我手頭上有一個(gè)專門為公司前端而打造的APM項(xiàng)目，里面包含了詳盡的瀏覽器版本及份額數(shù)據(jù)，將APM項(xiàng)目中的瀏覽器數(shù)據(jù)與caniuse的特性數(shù)據(jù)相結(jié)合，可以制作出類似于caniuse官網(wǎng)的特性查詢分析頁面，但報(bào)表數(shù)據(jù)只關(guān)心我司的用戶群里使用的瀏覽器，而非依據(jù)全球或者全國。

（2）
babel-preset-env這個(gè)插件也可以結(jié)合caniuse-shein的數(shù)據(jù)，給出對應(yīng)瀏覽器份額的babel插件列表