使用 polyfills 的簡易方法

本文作者為 Andrew BettsRobert 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服務凝赛。這有點像是驗光師先對你的眼睛驗光檢查,然后針對你的視力問題配置眼鏡坛缕。我們將對瀏覽器做同樣的事情墓猎。下面解釋它是如何工作的:

  1. 開發(fā)人員在他們的頁面中插入一個腳本標記作為導入polyfill服務的端點。

  2. 該服務分析瀏覽器的user-agent標頭和必需特性列表(或是使用一個默認的可使用polyfill服務的列表)赚楚,然后搭建瀏覽器所需的polyfill列表陶衅。

  3. 按照正確的依賴順序表定制polyfill。

  4. 通過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的加載器4舛稀)

測試與文檔特性支持

我們所支持特性的完整表格在特性矩陣中。為了搭建這個網(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/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市儒鹿,隨后出現(xiàn)的幾起案子化撕,更是在濱河造成了極大的恐慌,老刑警劉巖挺身,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異锌仅,居然都是意外死亡章钾,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門热芹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來贱傀,“玉大人,你說我怎么就攤上這事伊脓「” “怎么了魁衙?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長株搔。 經(jīng)常有香客問我剖淀,道長,這世上最難降的妖魔是什么纤房? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任纵隔,我火速辦了婚禮,結果婚禮上炮姨,老公的妹妹穿的比我還像新娘捌刮。我一直安慰自己,他們只是感情好舒岸,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布绅作。 她就那樣靜靜地躺著,像睡著了一般蛾派。 火紅的嫁衣襯著肌膚如雪俄认。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天碍脏,我揣著相機與錄音梭依,去河邊找鬼。 笑死典尾,一個胖子當著我的面吹牛役拴,可吹牛的內容都是我干的。 我是一名探鬼主播钾埂,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼河闰,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了褥紫?” 一聲冷哼從身側響起姜性,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎髓考,沒想到半個月后部念,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡氨菇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年儡炼,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片查蓉。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡乌询,死狀恐怖,靈堂內的尸體忽然破棺而出豌研,到底是詐尸還是另有隱情妹田,我是刑警寧澤唬党,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站鬼佣,受9級特大地震影響驶拱,放射性物質發(fā)生泄漏。R本人自食惡果不足惜沮趣,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一屯烦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧房铭,春花似錦驻龟、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至凌蔬,卻和暖如春露懒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背砂心。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工懈词, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辩诞。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓坎弯,卻偏偏與公主長得像,于是被迫代替她去往敵國和親译暂。 傳聞我的和親對象是個殘疾皇子抠忘,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內容

  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區(qū)別? (1)外永、<...
    clark124閱讀 3,498評論 1 19
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理崎脉,服務發(fā)現(xiàn),斷路器伯顶,智...
    卡卡羅2017閱讀 134,716評論 18 139
  • 什么是 FOUC(無樣式內容閃爍)囚灼?你如何來避免 FOUC? FOUC - Flash Of Unstyled ...
    MrThorn閱讀 442評論 0 1
  • @轉自GitHub 介紹js的基本數(shù)據(jù)類型祭衩。Undefined灶体、Null、Boolean汪厨、Number赃春、Strin...
    YT_Zou閱讀 1,163評論 0 0
  • 腦袋突然之間短路愉择,不知道寫什么劫乱,但又明白在這半小時內必須得寫點什么织中,要不然交不了作業(yè),要不然再拖孩子們從幼兒園回來...
    小丫屠閱讀 1,397評論 2 0