前端語法兼容性問題到底是怎么回事？
??如果你喜歡我寫的文章，可以把我的公眾號(hào)設(shè)為星標(biāo) ??，這樣每次有更新就可以及時(shí)推送給你啦
對(duì)于大部分開發(fā)者來說，版本兼容是一件存在感很低的事情，因?yàn)樗诮^大部分情況下都是一行配置，在一些前端工具鏈（例如 Babel、CoreJS，Autoprefixer 等工具）的幫助下適配到目標(biāo)瀏覽器，只會(huì)在一些大的 break change 事件（例如 Vue3 必須在支持 Proxy 的現(xiàn)代瀏覽器下才能運(yùn)行）下才會(huì)關(guān)注這件不起眼的事情。
但當(dāng)你稍微研究一下的時(shí)候，才會(huì)發(fā)現(xiàn)這塊兒內(nèi)容知識(shí)非常雜，因?yàn)榘姹炯嫒莸南嚓P(guān)知識(shí)沒有那么多內(nèi)在邏輯性，很多細(xì)碎的知識(shí)點(diǎn)散落在在各個(gè)商業(yè)公司的博弈和版本變更中。前段時(shí)間因工作需要對(duì)部分語言/瀏覽器特性重點(diǎn)關(guān)注了一下，以此文做一下記錄。
本文主要記錄了移動(dòng)端的版本適配問題，未對(duì)桌面端做更多的研究，后面有可能補(bǔ)充相關(guān)內(nèi)容。
1.iOS & Safari
iOS 和 Android 雖然都是一年更新一個(gè)大版本，但受益于生態(tài)的封閉性，iOS 的更新率極高，基本上最近的兩個(gè)版本就能覆蓋 95% 以上的人群。
例如 Apple 官方統(tǒng)計(jì)[1]，截止到 2022-05-31，Apple 四年內(nèi)推出的新機(jī)型中，iOS 15 已經(jīng)有 89% 的裝機(jī)率，iOS 14 也有 10% 的裝機(jī)率；而在所有歷史機(jī)型里，iOS 15 和 iOS 14 加起來也有 96% 的裝機(jī)率，隔壁 Android 都羨慕哭了：
為什么如此關(guān)注 iOS 的版本號(hào)？因?yàn)?iOS 版本基本上和 Safari 版本一一對(duì)應(yīng)的，例如 iOS 15.6 上安裝著 Safari 15.6，iOS 14.5 上安裝著 Safari 14.1，具體的映射關(guān)系可見 MDN 的映射表[2]，或者可以看 core-js: SafariToIOS[3]，所以我們基本上只要比對(duì) iOS 版本號(hào)即可。
另外一個(gè)問題是，有一定 C 端開發(fā)經(jīng)驗(yàn)的開發(fā)者可能還會(huì)關(guān)注 iOS 上運(yùn)行的是 UIWebView 還是 WKWebView，在 2022 年這個(gè)時(shí)間點(diǎn)其實(shí)已經(jīng)不需要關(guān)注了，因?yàn)?Apple Store 已經(jīng)發(fā)過公告[4]，2020 12 月之后已經(jīng)禁止含 UIWebView 的 APP 上架了，所以 iOS 平臺(tái)只有 WKWebView 這一個(gè) WebView 了，而且它兼容性也不錯(cuò)[5]，最低支持到 iOS 8。
2.Android & Chrome
說完 iOS 我們?cè)僬務(wù)?Android。因?yàn)閮蓚€(gè)操作系統(tǒng)的發(fā)展策略不同，再加上國(guó)內(nèi)各大廠商的魔改，Android 從一開始就深陷碎片化的深淵，有 Android 開發(fā)經(jīng)歷的同學(xué)一定都深有感觸。
Android 系統(tǒng)本身碎片化，Android 系統(tǒng)自帶的瀏覽器更碎片化。在 Android 早期，Android 版本和 Chrome 瀏覽器版本是有綁定關(guān)系的，那這個(gè)早期是有多早？那就是 Android 4，2014 年發(fā)布，綁定了 Chrome 早期幾個(gè)版本，因?yàn)閿?shù)據(jù)不多，我這里就直接列出來：
// https://github.com/zloirock/core-js/blob/master/packages/core-js-compat/src/mapping.mjs
ChromeToAndroid: [
[9, '3.0'],
[12, '4.0'],
[30, '4.4'],
[33, '4.4.3'],
]
事情的轉(zhuǎn)機(jī)出現(xiàn)在 Android 5，這個(gè)版本[6]里 WebView 被移植為一個(gè)獨(dú)立的 APK，可以獨(dú)立更新，不再和 Android 系統(tǒng)深度綁定。
Google 的想法初衷是好的，借助于 Google 商店，解耦更利于瀏覽器的版本迭代。但是在國(guó)內(nèi)多廠商魔改和一些網(wǎng)絡(luò)問題上，極有可能發(fā)生這樣的事情：對(duì)于一臺(tái) Android 5 手機(jī)，理論上用戶可以安裝 Chrome 36 - Chrome 95 任意一個(gè)版本！
所以和 iOS 對(duì)比起來，Android 因?yàn)樗拈_放性帶來嚴(yán)重的碎片化問題：Android 版本多樣，Chrome 版本多樣，還有各種魔改內(nèi)核，對(duì)于開發(fā)者來說適配起來真的苦不堪言。
3.Web Browser
了解完操作系統(tǒng)的版本歷史，我們?cè)倏纯礊g覽器上最關(guān)鍵的 JavaScript 語法兼容度。
JavaScript
最近十年內(nèi)，JS 這門語言的的最大變革就是 ES6（ES2015）的發(fā)布了，帶來了非常多的新特性。下面我搞了一個(gè)表格，列出幾個(gè)大家常用的 JS 語法是從哪個(gè)版本開始支持的：
| 語法/API | iOS | Chrome |
|---|---|---|
Class | 9 | 49 |
=> | 10 | 45 |
const | 11 | 49 |
let | 11 | 49 |
Proxy | 10 | 49 |
generators | 10 | 39 |
Promise | 8 | 33 |
async await | 11 | 55 |
import export | 10.3 | 61 |
| ... | ... | ... |
我們可以看到，這些語法的最低支持版本集中在 iOS 10、iOS 11，Chrome 49，Chrome 61 這幾個(gè)版本上，我們把它們的版本發(fā)布時(shí)間列出來：
| 事件 | 發(fā)布時(shí)間 |
|---|---|
ES5 標(biāo)準(zhǔn)發(fā)布時(shí)間 | 2009.12 |
ES6 標(biāo)準(zhǔn)發(fā)布時(shí)間 | 2015.06 |
iOS 10 發(fā)布時(shí)間 | 2016.06 |
iOS 11 發(fā)布時(shí)間 | 2017.06 |
Chrome 49 發(fā)布時(shí)間 | 2016.03 |
Chrome 61 發(fā)布時(shí)間 | 2017.09 |
時(shí)間列出來后結(jié)論基本上是呼之欲出了：ES6 標(biāo)準(zhǔn)發(fā)布后的未來一年時(shí)間內(nèi)，各大瀏覽器語法就支持的差不多了，兩年后基本上就全部支持了，這個(gè)時(shí)間點(diǎn)就是 2017 年，對(duì)應(yīng)著 iOS 11 和 Chrome 61。
legacy vs modern
看完 ES6 的支持情況，我們?cè)賮砹私鈨蓚€(gè)概念，「經(jīng)典瀏覽器」和「現(xiàn)代瀏覽器」。
這兩個(gè)詞在英文里對(duì)應(yīng)著「legacy browser」和「modern browser」。如果大家比較關(guān)注一些相對(duì)前沿的前端項(xiàng)目，比如說 Vue3，Solidjs，Vite，它們的官網(wǎng)里其實(shí)經(jīng)常提到這兩個(gè)詞。
那么問題來了，既然有兩個(gè)稱呼，那在工程里必然存在一個(gè)分界線去區(qū)分 legacy 和 modern，這個(gè)分界線就是 iOS10.3 和 Chrome 61，既瀏覽器支持 ES Modules 的版本（支持 <script type="module"> & import & export）。
這樣一看是不是就和上面的內(nèi)容對(duì)上了？Babel 官網(wǎng)也做了相關(guān)的解釋[7]，core-js 也專門做了區(qū)分[8]，更詳細(xì)的介紹可以看 MDN 的文章：JavaScript modules[9]，我就不做多余介紹了。
modern feature
經(jīng)過上面的探索，我們?cè)倩剡^來看看一些比較 modern 的 browser feature 的支持程度：
| browser fature | iOS | Chrome |
|---|---|---|
| Web Worker | 5 | 4 |
| SubtleCrypto | 7 | 37 |
| Service Worker | 11.3 | 45 |
| WebAssembly | 11 | 57 |
| CSS Grid Layout | 10.3 | 58 |
| WebGPU | not support | not support |
| ... | ... | ... |
看看各個(gè) API 的兼容度，再結(jié)合上文的內(nèi)容，就可以發(fā)現(xiàn)很多「兼容性不好」人云亦云的說法不攻自破，其實(shí)大部分情況下不是兼容度不好從而不用，是項(xiàng)目還沒有復(fù)雜到那個(gè)程度需要用這些高級(jí)功能。
4.Open Source Project
日常開發(fā)中肯定不能寫一行代碼查一下兼容度，這些都是由社區(qū)工具做抹平的。
兼容度數(shù)據(jù)源頭可以追述到 MDN 的 browser-compat-data[10]，記錄了各種 API 的兼容，MDN 網(wǎng)站的兼容度直接是從這個(gè) repo 里讀的。我們常用的 caniuse[11] 網(wǎng)站，一部分?jǐn)?shù)據(jù)也是依賴于它的。
接下來是工程上依賴最多的 browserslist[12]，babel、eslint、autoprefixer、postcss，webpack 等構(gòu)建工具都依賴于它，browserslist 的數(shù)據(jù)又依賴于 caniuse-lite[13]，其實(shí)也是依賴于 caniuse[14]，lite 只保留了核心數(shù)據(jù)，對(duì)一些說明文案做了裁剪處理。
綜合以上分析，我們可以看出，在項(xiàng)目工程里依賴的 browserslist，數(shù)據(jù)準(zhǔn)確性還是可以得到保證的，所以兼容性還是無需擔(dān)心的。
5.Adaptation Suggestions
說了這么多，那么有什么配置建議呢？我個(gè)人認(rèn)為主要有 3 點(diǎn)建議提供參考。
第一個(gè)是參考國(guó)民級(jí) APP 的最低支持度配置。
在國(guó)內(nèi)，在日活上能稱為國(guó)民級(jí) APP 的就是微信抖音了，這兩個(gè) APP 因?yàn)槿栈罹薮螅旧弦呀?jīng)覆蓋到全部中國(guó)人，所以他們的配置一定有所考量，可以反應(yīng)出國(guó)內(nèi)的整體手機(jī)版本水平。
從 App Store/Android 應(yīng)用商店/瀏覽器 UA 上看，我們可以得處以下結(jié)論（截止到 2022-8-8）：
微信：最低支持到 iOS 12、Android 5、內(nèi)置瀏覽器版本為Chrome 86抖音：最低支持到 iOS 10、Android 5、內(nèi)置瀏覽器版本為Chrome 75
當(dāng)然你也可以參考其他 APP，由于精力有限我就不做過多展開了。
根據(jù)項(xiàng)目的迭代速度來看，iOS 基本上可以做到一年一升級(jí)，比如說今年 iOS 16 出來后，明年最低適配版本基本上可以升到 iOS 11 了，Android 因?yàn)殚L(zhǎng)尾效應(yīng)和版本不綁定的問題，應(yīng)該還會(huì)支持到 Android 5。
第二個(gè)建議是直接看當(dāng)前業(yè)務(wù)的版本數(shù)據(jù)。
不同的公司不同的項(xiàng)目都有不同的用戶場(chǎng)景，比如說面向三四線 C 端用戶的場(chǎng)景，一般低端機(jī)就會(huì)多一些；面向門店的場(chǎng)景，說不定還得適配 IE 瀏覽器；面向企業(yè)內(nèi)的開發(fā)者項(xiàng)目，直接適配到最新幾個(gè)瀏覽器即可。
場(chǎng)景如此之多就要依賴于用戶版本數(shù)據(jù)統(tǒng)計(jì)了。一般中大廠都有比較完善的數(shù)據(jù)監(jiān)控中臺(tái)，直接拉一份數(shù)據(jù)就能獲取大致情況，基建不完善的小公司也可以單獨(dú)開個(gè)接口記錄數(shù)據(jù)，收集一個(gè)月做個(gè)去重統(tǒng)計(jì)也能得到相關(guān)數(shù)據(jù)。拿到數(shù)據(jù)后再結(jié)合業(yè)務(wù)場(chǎng)景做些取舍，基本上就可以拿到最低適配了。
第三個(gè)建議結(jié)合前端框架和 Chrome 版本做兼容。
結(jié)合前端框架其實(shí)很好理解，比如說你用了 Vue3，底層依賴于 Proxy，那么最低依賴已經(jīng)鎖死到 iOS 10 和 Chrome 49 了，那你的最低配置只能比以上版本高，假如你無腦設(shè)置為 iOS 9 或 Android 4，除了在最低版本上跑不起來，還要平白無故的多了許多語法轉(zhuǎn)換和 polyfill，在 構(gòu)建速度/運(yùn)行時(shí)性能/產(chǎn)物體積 上都會(huì)產(chǎn)生不必要的劣化。
結(jié)合 Chrome 版本做兼容其實(shí)就是本文第二大節(jié)的內(nèi)容。因?yàn)?Android 5 之后不再和 Chrome 做深度綁定，版本兼容設(shè)置 Android 版本其實(shí)是無意義的行為，應(yīng)該根據(jù)統(tǒng)計(jì)結(jié)果直接設(shè)置 Chrome 版本，做更細(xì)粒度的配置。
Refs: Version History
以上的版本歷史和發(fā)布時(shí)間主要參考官方更新日志/文檔 和 維基百科，相關(guān)鏈接如下所示：
iOS 版本歷史：https://en.wikipedia.org/wiki/IOS_version_history Android 版本歷史：https://en.wikipedia.org/wiki/Android_version_history Chrome 版本歷史：https://en.wikipedia.org/wiki/Google_Chrome_version_history WKWebView API 兼容度：https://developer.apple.com/documentation/webkit/wkwebview Android Verison 和 APILevel 的對(duì)應(yīng)關(guān)系：https://developer.android.com/guide/topics/manifest/uses-sdk-element#ApiLevels
??如果你喜歡我的文章，希望點(diǎn)贊?? 收藏 ?? 在看 ?? 三連支持一下，謝謝你，這對(duì)我真的很重要！
歡迎大家關(guān)注我的微信公眾號(hào)：鹵蛋實(shí)驗(yàn)室，目前專注前端技術(shù)，對(duì)圖形學(xué)也有一些微小研究。
也可以加我的微信 egg_labs，歡迎大家來撩。
參考資料
Apple 官方統(tǒng)計(jì): https://developer.apple.com/support/app-store/
[2]MDN 的映射表: https://github.com/mdn/browser-compat-data/blob/main/browsers/safari_ios.json
[3]core-js: SafariToIOS: https://github.com/zloirock/core-js/blob/master/packages/core-js-compat/src/mapping.mjs
[4]公告: https://developer.apple.com/cn/news/?id=edwud51q
[5]兼容性也不錯(cuò): https://developer.apple.com/documentation/webkit/wkwebview
[6]這個(gè)版本: https://developer.chrome.com/docs/multidevice/webview/
[7]解釋: https://babeljs.io/docs/en/options#targetsesmodules
[8]區(qū)分: https://github.com/zloirock/core-js/blob/master/packages/core-js-compat/src/external.mjs
[9]JavaScript modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
[10]browser-compat-data: https://github.com/mdn/browser-compat-data
[11]caniuse: https://caniuse.com/
[12]browserslist: https://github.com/browserslist/browserslist
[13]caniuse-lite: https://github.com/browserslist/caniuse-lite
[14]caniuse: https://github.com/Fyrd/caniuse