初學者的HTML5跨瀏覽器指南

關鍵要點

• Polyfill 是一種工具，讓開發者能在不支持現代 Web 功能的舊版瀏覽器中使用這些功能，確保這些瀏覽器的用戶仍然可以訪問和使用網站，而不會損失任何功能或體驗。
• Polyfill.io 是一個開源項目，按需提供 Polyfill 庫，允許開發者使用最新的標準，同時保持與舊版瀏覽器的兼容性。它讀取 User-Agent HTTP 頭，只提供必要的 Polyfill，從而減少了現代瀏覽器的膨脹。
• 雖然Polyfill 有助於在舊版瀏覽器中啟用現代功能，但它也有一些潛在的缺點，例如增加網頁的重量，這可能會減慢加載時間；以及可能無法完全或準確地複制其旨在Polyfill 的功能，從而導致不一致或錯誤。

網頁發展日新月異。新的框架、工具，甚至語言層出不窮。然而，許多開發者感到他們必須以最慢用戶的速度前進。現代瀏覽器是“常青”的——它們在後台自動更新，無需請求許可，並且在改進新 API 方面取得了長足的進步。

然而，即使是現代瀏覽器也並非同時實現所有功能。閱讀關於現代開發前沿技術的文章，卻發現這些技術在未來幾年都無法使用，這令人沮喪。也許您查看過網站的分析數據，發現仍有用戶使用 IE9？您應該像 2011 年那樣編寫代碼，還是將所有內容委託給 jQuery 或某個框架？還有另一種選擇。那就是 Polyfill。

什麼是 Polyfill？我們為什麼需要它們？

Remy Sharp 在 2009 年的一本書和博客文章中創造了這個術語。如果瀏覽器中存在該功能，Polyfill 允許瀏覽器執行其操作；如果不存在，Polyfill 會介入以彌補缺失的功能。它們填補了舊版瀏覽器的漏洞，即我們今天想要使用的缺失功能。它使用非原生代碼複製原生 API。

我們談論的是哪些缺失的功能？

2009 年，ECMAScript 第 5 版發布。這對這門語言來說是一個巨大而激進的進步。 ECMAScript 2015 也帶來了類似的重大更新。未來，對這門語言的改進將是漸進的，每年都會發生。這是一個令人興奮的時代，新的功能不斷添加到這門語言中。除了核心語言本身之外，還有 DOM 和 Web 平台的各種 API。為了突出現代瀏覽器和舊版瀏覽器之間的差異，以下是最新 Chrome 版本與 Internet Explorer 9（一些公司仍然令人遺憾地強制要求支持）的比較。還有一個表格顯示了對 ECMAScript 6 的支持。第二個表格只追溯到 IE 11，正如您所看到的，它幾乎不支持任何 ES6 功能。這是很多缺失的功能……

Polyfill 與轉譯

因此，從上面的表格中可以清楚地看出，我們需要轉譯我們的代碼。它採用您閃亮的新語法，並輸出老式的 ECMAScript 5。如果您想在代碼中使用箭頭函數、async/await、rest 和 spread 參數、類等，則需要使用 Babel 等工具將您的 ES6 代碼轉譯為 ES5。但是，您無法 Polyfill JavaScript 的語法。雖然 Babel 會將您的箭頭函數轉換為常規函數，但 Polyfill 會向全局作用域和原生原型添加方法。 Babel 提供了自己的ES6 Polyfill，用Babel 網站的話來說，它提供了“新的內置對象，如Promise 或WeakMap，靜態方法，如Array.from 或Object.assign，實例方法，如Array.prototype.includes ，以及生成器函數。”因此，Babel Polyfill 可以為我們提供所有想要的ES6 功能。但它遺漏了很多東西。也許您使用 classList API 添加和刪除類，或使用 matchMedia 進行媒體查詢，但您仍然需要支持 IE9。幸運的是，有一項服務可以提供 Babel Polyfill 涵蓋的所有內容，以及更多內容。

使用 Polyfill.io 簡化生活

Polyfill.io 是金融時報開發的一個開源項目。它目前每天接收多達 2.04 億個請求，並稱自己為“Polyfill 的規範庫”。這個按需提供 Polyfill 的系統使您可以瀏覽 Can I Use，聳聳肩，使用最新的標準，並且仍然與舊版瀏覽器兼容。

理想情況下，我們應該只 Polyfill 我們實際使用過的功能，並且只發送特定瀏覽器實際需要的那些 Polyfill。 Polyfill.io 可以同時滿足這兩個需求。該服務讀取 User-Agent HTTP 頭，以便只提供必要的內容，而不是向現代瀏覽器提供膨脹的文件。新的瀏覽器將收到幾乎為空的文件，舊版本的 IE 將收到大量代碼。您可以通過在查詢字符串中指定您正在使用的功能列表來減輕發送到舊機器的代碼的重量。如果省略，將使用一組默認值。使用該服務確實需要一個額外的阻塞 HTTP 請求，但在我看來，它的易用性是值得的。 Google 的工程師 Philip Walton 對 Polyfill 和性能有自己的看法，如果您擔心額外的請求，這值得一讀。

它不涵蓋什麼？

Polyfill.io 非常全面，它包括一些前沿的瀏覽器 API，如 Fetch 和 Promises。然而，還有大量的 Polyfill 可以讓您嘗試和使用新技術。也許最令人興奮的是 Web Components，這是一種潛在的革命性前端開發進步，它提供了樣式封裝和易於重用的功能。跨瀏覽器支持終於即將到來。 Google 大力推動他們的 Polymer 項目，這基本上是一個建立在大型 Polyfill 之上的 JavaScript 框架。但是，Web Components 不應該等同於這個框架，因為 Web Components 本身就很有潛力。您可以無需 Polymer 即可使用組件，但 API 的全部範圍尚未被複製。 Web Animations API 提供了一種高效的無庫方式，可以使用 Javascript 構建動畫。瀏覽器支持目前還不是很好，但 shim 足夠可靠，我已經自信地將這項技術用於我參與的所有生產網站的動畫。它提供了兩種選擇——一種填充某些瀏覽器中當前可用的功能。另一種添加尚未最終確定的功能，這讓我談到了我的最後一個主題……

“Prolyfills”：測試新興 API

以及 Prolyfills——對 可能 會出現的 API 的推測性 shim。

Polyfill 尚未發布的功能作為概念驗證的做法越來越普遍，並且對於嘗試前端開發的前沿技術來說很有趣。也許您想測試一下受流行的 RxJS 庫啟發的 Observables 建議？為此有一個 Prolyfill。嘗試新技術是作為開發人員最令人興奮的部分之一。

結論

就是這樣。我們已經了解了什麼是 Polyfill，為什麼它們是必要的，如何從 polyfill.io 中提取您可能需要的任何 Polyfill，以及如何 Polyfill 尚未發布的功能。但您呢？您是否只使用您支持的所有瀏覽器中都可用的語言功能？或者您是否編寫了現代代碼，然後使用 Polyfill 使其在舊版瀏覽器中也能工作？您需要支持的最舊瀏覽器是什麼？請在下面的評論中告訴我。 本文由 Graham Cox 進行了同行評審。感謝所有 SitePoint 的同行評審人員，使 SitePoint 內容達到最佳狀態！

關於 HTML5 跨瀏覽器 Polyfill 的常見問題

使用 HTML5 跨瀏覽器 Polyfill 的目的是什麼？

HTML5 跨瀏覽器 Polyfill 用於在舊版瀏覽器中啟用現代 Web 功能，這些瀏覽器本身並不支持這些功能。它們充當後備功能，提供與現代瀏覽器相同的功 能。這確保了舊版瀏覽器的用戶仍然可以訪問和使用網站或 Web 應用程序，而不會損失任何功能或體驗。

如何在我的 Web 項目中實現 Polyfill？

在 Web 項目中實現 Polyfill 包括幾個步驟。首先，您需要確定要 Polyfill 的功能。接下來，您需要找到一個合適的 Polyfill 來提供該功能。這可以通過在線搜索 Polyfill 庫或存儲庫來完成。找到合適的 Polyfill 後，您可以通過使用腳本標籤將其添加到 HTML 文件中來將其包含在您的項目中。

使用 Polyfill 有哪些潛在的問題或缺點？

雖然 Polyfill 非常有用，但它們確實有一些潛在的缺點。其中一個主要問題是性能。 Polyfill 會增加網頁的額外重量，這可能會減慢加載時間並對用戶體驗產生負面影響。此外，並非所有 Polyfill 都是一樣的。有些可能無法完全或準確地複制它們旨在 Polyfill 的功能，這可能會導致不一致或錯誤。

如何為我的需求選擇合適的 Polyfill？

選擇合適的 Polyfill 取決於幾個因素。首先，您需要考慮您嘗試 Polyfill 的功能，並找到一個準確複製其功能的 Polyfill。您還應該考慮您要定位的瀏覽器，並確保 Polyfill 支持它們。最後，您應該考慮 Polyfill 的大小和性能，因為這些會影響您網站的加載時間和整體性能。

我可以創建自己的 Polyfill 嗎？

是的，可以創建自己的 Polyfill。這涉及編寫一個腳本，該腳本檢查瀏覽器是否支持某個功能，如果瀏覽器不支持，則提供該功能。但是，創建自己的 Polyfill 可能很複雜且耗時，通常使用現有的 Polyfill 更容易、更高效。

有哪些流行的庫或資源可用於查找 Polyfill？

有幾個流行的庫和資源可用於查找 Polyfill。這些包括 Polyfill.io，它提供一項服務，可以自動返回瀏覽器需要的 Polyfill；Modernizr 庫，其中包含一系列 Polyfill；以及 GitHub 存儲庫 HTML5 跨瀏覽器 Polyfill，這是一個全面的 Polyfill 列表。

如何測試 Polyfill 是否正常工作？

測試 Polyfill 包括檢查它旨在提供的功能是否在您要定位的瀏覽器中正常工作。這可以通過使用瀏覽器測試工具或手動在不同的瀏覽器中測試該功能來完成。如果該功能按預期工作，則 Polyfill 正常工作。

Polyfill 可以與 React 或 Angular 等 JavaScript 框架一起使用嗎？

是的，Polyfill 可以與 React 或 Angular 等 JavaScript 框架一起使用。事實上，這些框架通常推薦甚至需要某些 Polyfill 以獲得最佳兼容性和性能。使用這些框架實現 Polyfill 的過程類似於在常規 Web 項目中實現 Polyfill。

Polyfill 是解決瀏覽器兼容性問題的長期解決方案嗎？

Polyfill 更像是解決瀏覽器兼容性問題的短期解決方案。它們用於填補瀏覽器對某些功能的支持空白，直到瀏覽器趕上並原生支持這些功能。隨著瀏覽器不斷發展和更新，對某些 Polyfill 的需求將會減少。

Polyfill 和 shim 之間有什麼區別？

Polyfill 和 shim 都用於為瀏覽器不支持的功能提供後備功能。但是，shim 通常通過使用不同的現有 API 來為缺少的 API 提供後備功能，而 Polyfill 提供瀏覽器可以使用的新實現，就好像它是原生的。

以上是初學者的HTML5跨瀏覽器指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！