本文作者為 Andrew Betts 與 Robert Nyman呢燥。Andrew 是金融時報(Financial Times)實驗室主任澡绩，該實驗室旨在金融時報開發(fā)并推廣實踐性的 Web 技術赘艳。Robert 是 Mozilla Hacks 技術傳道師及編輯丁稀。曾就 HTML5应民，JavaScript 以及 Open Web 發(fā)表過多次談話與博文话原。Robert 堅定地看好 HTML5 與 Open Web，自1995年就開始在 Front End 開發(fā)部門研究 Web 技術诲锹。
本文系 OneAPM 工程師 編譯呈現(xiàn)繁仁，以下為正文。
Polyfills是一種保證使用現(xiàn)代代碼的絕佳辦法归园，同時還能支持舊版瀏覽器黄虱。但是目前polyfills使用起來很困難，因此我們開發(fā)了一種全新的服務以便簡化其使用方法庸诱。在此悬钳，邀請讀者使用并改進它。
挑戰(zhàn)
下面是我們正在嘗試解決的一些問題：
開發(fā)者對哪些特性需要使用polyfill不是很清楚偶翅。例如你在某個舊版本的IE瀏覽器（因為你有很大數(shù)量的用戶還在使用它）中載入網(wǎng)站默勾，發(fā)現(xiàn)網(wǎng)站不工作，你不得不慢慢調試來搞清楚到底是哪個特性導致了這個問題聚谁。有時候問題很清楚母剥，但大多時候并非如此，尤其是舊版瀏覽器往往缺少好的開發(fā)者工具的時候。
針對每個特性都有很多polyfill可供選擇环疼。很難確定哪一個能最忠實地模擬缺少的特性习霹。
有一些大的polyfill捆綁著很多你不需要的polyfill，例如ES6炫隶，它全面覆蓋了一系列的特性集淋叶。為了解決一個簡單的問題而向瀏覽器植入所有的這些代碼其實是不必要的。
較新版本的瀏覽器不需要polyfill伪阶，但一般來說polyfill可用于所有種類的瀏覽器煞檩。雖然這是為了提高與舊版瀏覽器的兼容性，但這也降低了新版瀏覽器的性能栅贴。我們不愿意做出這種妥協(xié)斟湃。我們更愿意在原本不具備某個特性的瀏覽器上使用polyfill。
我們的解決辦法：以polyfill為服務
為了解決這些問題檐薯，我們開發(fā)了polyfill服務凝赛。這有點像是驗光師先對你的眼睛驗光檢查，然后針對你的視力問題配置眼鏡坛缕。我們將對瀏覽器做同樣的事情墓猎。下面解釋它是如何工作的：
開發(fā)人員在他們的頁面中插入一個腳本標記作為導入polyfill服務的端點。
該服務分析瀏覽器的user-agent標頭和必需特性列表（或是使用一個默認的可使用polyfill服務的列表）赚楚，然后搭建瀏覽器所需的polyfill列表陶衅。
按照正確的依賴順序表定制polyfill。
通過CDN 壓縮服務包并提供服務（對此我們衷心感謝Fastly的支持）直晨。
我們真的需要這個解決辦法嗎？你可以這樣思考：Modernizris是一個大型的特性檢測包膨俐，所有對它的合理使用都得益于自定義的安裝配置勇皇，但是很大數(shù)量的Modernizris用戶僅僅使用了它的默認安裝，這常常是來自于 cdnjs.com 或是 html5boilerplate 的某個部件焚刺。但是敛摘，如果不使用Modernizris的特性檢測功能，那你為什么安裝這個工具呢乳愉？可能你誤解了庫文件的功能兄淫，單純地以為Modernizris會“修補東西”？不得不承認蔓姚，第一次聽到這個名字的時候筆者正是這樣想的捕虽，以至于后來發(fā)現(xiàn)Modernizris不但沒有起到作用，反而拖了現(xiàn)代瀏覽器的后腿坡脐，筆者感到有些失望泄私。
然而，Polyfill服務卻是真正起到了作用。不想花時間去深入了解舊版本瀏覽器缺點的你一點兒錯也沒有晌端。讓別人先弄明白問題所在捅暴，然后我們在不需要了解細節(jié)的情況下就能直接受益。
如何使用
最簡單的使用情況是：
<script src="http://cdn.polyfill.io/v1/polyfill.min.js" async defer></script>
這包含了我們默認的 polyfill設置咧纠。這個默認設置是我們人工挑選的一個特性列表蓬痒，我們認為這個列表中所包含的特性對于現(xiàn)代網(wǎng)絡開發(fā)來說不可或缺，而且相對應的polyfill相當小且十分精確漆羔。如果你想指定添加某個polyfill特性梧奢，只需要這么做：
<!-- Just the Array.from polyfill -->
<script src="http://cdn.polyfill.io/v1/polyfill.min.js?features=Array.from" async defer></script>
<!-- The default set, plus the geolocation polyfill -->
<script src="http://cdn.polyfill.io/v1/polyfill.min.js?features=default,Navigator.prototype.geolocation" async defer></script>
如果有必要在解析自己的代碼之前加載polyfill的話，你可以移除async和defer屬性钧椰，或是使用一個腳本加載器（不需要任何polyfill的加載器４舛稀）
測試與文檔特性支持
我們所支持特性的完整表格在特性矩陣中。為了搭建這個網(wǎng)格嫡霞，我們使用了Sauce Lab的自動測試平臺瓶埋，它截獲了polyfill在每個瀏覽器中的測試，然后記錄結果诊沪。
User-Agent 分析养筒？ 你確定？
是的端姚，我們確定晕粪。下面是為什么UA分析要比特性檢測好的原因：
- 在一些情形中，針對同一特性我們有多個polyfill可供選擇渐裸，這是因為一些瀏覽器提供非順從實施方式巫湘，因此只需要你敲打成型即可，而其他瀏覽器則沒有提供任何的實施昏鹃。但若是有UA檢測尚氛，你能夠選擇相應的polyfill。
- 有了UA檢測洞渤，第一個HTTP請求就能直接由polyfill代碼應答阅嘶。如果我們使用了特性檢測，第一個請求將會為特性檢測代碼服務载迄，而第二個請求則需要用于獲取特定的polyfill讯柔。
幾乎所有的大型網(wǎng)站都使用UA檢測。這并不是說與之相關的特征就是不好的护昧。顯然魂迄，好的UA規(guī)則要比差勁的UA規(guī)則更難編寫。而且我們并沒有排除借助特性檢測使用該服務的可能惋耙。
人人可用的服務
應用的服務部分由FT負責維護運營极祸，我們也正不斷地擴展和改進相關工具慈格，文檔，測試和服務特性遥金。源代碼可以在GitHub上上下載浴捆，因此你能輕易地自行配置服務，我們也在cdn.polyfill.io上面配置了一個實例服務稿械，你可以免費使用选泻。而且，Fastly的朋友正提供免費的CDN發(fā)布和SSL美莫。
我們已經(jīng)建好了平臺∫趁校現(xiàn)在，我們需要社區(qū)的力量讓它火起來厢呵。我們已經(jīng)提供了一些來自Jonathan Neal窝撵， Mathias Bynens等人的最佳polyfill服務，我們想要做得更加全面襟铭。請帶上你的polyfill碌奉，幫助我們改進測試，讓它成為能推動網(wǎng)絡前行的一項資源吧寒砖。
OneAPM 助您輕松鎖定 Node.js 應用性能瓶頸赐劣，通過強大的 Trace 記錄逐層分析，直至鎖定行級問題代碼哩都。以用戶角度展示系統(tǒng)響應速度魁兼，以地域和瀏覽器維度統(tǒng)計用戶使用情況。想閱讀更多技術文章漠嵌，請訪問 OneAPM 官方博客咐汞。
本文轉自 OneAPM 官方博客
原文地址：https://hacks.mozilla.org/2014/11/an-easier-way-of-using-polyfills/
