從新認識caniuse

困惑

相信你們都曾用caniuse網站查詢過css、js的一些兼容性問題，而且都從它反饋的兼容性數據中獲益，讓咱們的線上項目更加穩定、和諧的跑在用戶電腦裏。不過對於caniuse頁面上的一些細節，咱們可能會感到困惑或者模棱兩可，今天就帶着你們一塊兒來從新認識caniuse這個網站，並對它的原理和細節作些探究。

1.1從babel-preset-env提及

babel-preset-env是babel6中極力推崇的一個preset，preset表明的是babel plugins的一個集合，至關於一堆plugins的一個統稱。在babel最開始打江山的時候，es6標準也發佈不久，babelrc的配置中只須要添加es2015這樣的preset。但隨着es201六、es2017的相繼出現，babelrc很快就會變成一堆掛曆式的集合體。因此babel給出了env這個殺器，既避免了es20xx的出現，又能夠與caniuse的權威數據融合，讓配置preseet科學而簡單。

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

這是babel官網給出的env配置方案，"last 2 versions", "safari >= 7"，這兩個條件是並集的關係，babel將會分別給出知足這兩個條件的瀏覽器及版本，並會進行合併，最後算出一組瀏覽器及對應最低版本的數據。

babel是用來轉換js語法的一個編譯器，爲何還能知道知足env條件的瀏覽器跟版本，這要從browserslist這個庫提及。

1.2 Browserslist

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

last 1 version
> 1%
maintained node versions
not dead
複製代碼

browserslist可以把上面近似於人類語言的配置，轉換成一組瀏覽器集合。不過它的主要職責就是轉化上面的配置內容，按照正則過濾出正確瀏覽器列表內容，而它自己不提供瀏覽器列表的來源。

1.3 caniuse-lite

Browserslist的瀏覽器數據來源就是這個caniuse-lite，而它是caniuse-db庫的精簡版本，是從caniuse-db庫衍化而來，只不過對caniuse-db數據按照必定規則作了簡化，使得庫的大小減小了許多，而且提供一些查詢api供他人使用，每當caniuse-db更新時，也會跟着一塊兒發佈版本。

1.4 caniuse-db

caniuse的npm包，提供了caniuse網站查詢所需的全部數據。

2.caniuse庫的介紹

caniuse-db的github地址在此，caniuse鼓勵你們去github上提交pr，通過審覈以後就能夠被錄用到它的官方數據庫中。

2.1如何爲caniuse貢獻數據

首先，它爲咱們準備了sample-data.json文件，按照此文件格式把須要增長的特性名稱、介紹和瀏覽器兼容性狀況填寫清楚，保存並放到features-json文件夾中，最後提交pull request便可，審覈完畢後會自動把這部分新增特性保存到data.json中。data.json就是caniuse官方的數據庫導出文件，供其餘庫調用，每次json文件變化後，都會release一個新版本。

2.2 sample-data.json

做爲新特性發布的樣本文件，內容以下：

{
  "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":""
}
複製代碼

簡要介紹下其中的幾個關鍵字段：

（1）title：特性名稱

（2）description：特性介紹（搜索時的關鍵字）

（3）spec：跳轉到詳細介紹頁面

（4）links：拓展內容介紹

（5）keywords：搜索時的關鍵字

（6）status：特性在標準中的狀態

• ls - 標準

• 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並不僅是一個查詢css兼容性的網站。

若是想查看目前caniuse已經支持了多少種特性，以及特性對應的分組信息，能夠點擊這個網址。

（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

以上瀏覽器列表是固定的，用戶不能增長和缺乏某個瀏覽器類型。

總結

每當增長一個新特性時，都要對以上瀏覽器列表以及對應版本列表進行實測，特性的測試可以使用如下兩個官方推薦的網站https://www.browserstack.com 和 saucelabs.com。

對於第二個網站，可用於因瀏覽器兼容性形成生產事故的還原測試，在其網站的虛擬機內完成特定瀏覽器特定版本的實測，在測試完成後能夠觀看操做視頻，並支持導出功能，這對技術解決兼容性問題，提供了第一現場的操做流程，方便問題的解決。

3.caniuse網站介紹

3.1主頁面介紹

頁面紅字標註了4個地方

（1）表明了這個介紹框的內容隸屬於一個特性，也就是咱們在features-json看到的一個個跟特性相關的文件，沒有#標誌的不屬於特性。

（2）表明這個特性在標準中所處的一個狀態,具體參照前文對sample-data.json的介紹

（3）對於這個特性，在全球、中國全部瀏覽器中，分別有多少徹底支持和部分支持，把兩部分值加起來，獲得總份額。

（4）瀏覽器基線，表明對應瀏覽器current狀態的版本號。基線往上是該瀏覽器的低版本，並對相同支持狀況的版本進行合併。基線往下是將來的三個版本，並進行狀態合併。

3.2瀏覽器信息統計

caniuse關於瀏覽器的數據，主要都來源於statcounter，此網站統計了全球以及各國的瀏覽器使用狀況。

上面提到的瀏覽器基線及版本號列表，都是基於statcounter上個月份的數據統計。 例如chrome v73在3月12號發佈了版本，但在caniuse網站裏，v72仍是做爲了current版本，就是由於caniuse的分析數據來源於2月份的統計數據，數據並非實時更新。

3.3詳情

頁面紅字標註了4個地方

（1）瀏覽器對特性支持狀況相同的版本區間

（2）對特性的支持狀況

（3）火狐40-火狐64的發佈時間

（4）火狐40-火狐64，在全球、中國的使用份額

4.想法

知道了caniuse的數據來源及原理以後，咱們是否能夠打造屬於本身公司的caniuse，暫且就叫作caniuse-shein

（1） 目前，我司的前端只負責中後臺系統，面向的用戶羣體有限。 而我手頭上有一個專門爲公司前端而打造的APM項目，裏面包含了詳盡的瀏覽器版本及份額數據，將APM項目中的瀏覽器數據與caniuse的特性數據相結合，能夠製做出相似於caniuse官網的特性查詢分析頁面，但報表數據只關心我司的用戶羣裏使用的瀏覽器，而非依據全球或者全國。

（2） babel-preset-env這個插件也能夠結合caniuse-shein的數據，給出對應瀏覽器份額的babel插件列表