什么是 Polyfill？

Polyfill 是一種用于在現代瀏覽器中實現舊版瀏覽器不支持的新特性的代碼。它的作用是“填充”瀏覽器功能的缺失，使得開發者可以使用最新的 Web 標準（如 ES6+、HTML5、CSS3 等）編寫代碼，同時確保這些代碼在舊版瀏覽器中也能正常運行。

Polyfill 的作用

1. 兼容性：讓舊版瀏覽器支持新的 JavaScript API、HTML5 元素、CSS 屬性等。
2. 漸進增強：開發者可以優先使用現代瀏覽器的特性，同時通過 Polyfill 提供回退方案。
3. 統一開發體驗：減少因瀏覽器差異導致的代碼分支和兼容性處理。

Polyfill 的工作原理

Polyfill 的工作原理是通過檢測當前瀏覽器是否支持某個特性，如果不支持，則動態加載或執行一段代碼來模擬該特性的行為。

1. 特性檢測

• 在加載 Polyfill 之前，先檢測瀏覽器是否原生支持某個特性。
• 常用的檢測方法是使用條件語句或 typeof 檢查。

示例：檢測 Promise 是否支持

if (typeof Promise === 'undefined') {// 加載 Promise Polyfillrequire('promise-polyfill');
}

2. 加載 Polyfill

• 如果瀏覽器不支持某個特性，則動態加載 Polyfill 代碼。
• Polyfill 可以是獨立的 JavaScript 文件，也可以是通過 npm 安裝的模塊。

示例：動態加載 Polyfill

if (!Array.prototype.includes) {// 加載 Array.prototype.includes 的 Polyfillrequire('array-includes-polyfill');
}

3. 模擬實現

• Polyfill 的核心是模擬原生特性的行為。
• 例如，如果瀏覽器不支持 Array.prototype.includes，Polyfill 會實現一個類似的函數。

示例：實現 Array.prototype.includes 的 Polyfill

if (!Array.prototype.includes) {Array.prototype.includes = function(searchElement, fromIndex) {if (this == null) {throw new TypeError('"this" is null or not defined');}const o = Object(this);const len = o.length >>> 0;if (len === 0) return false;const n = fromIndex | 0;let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);while (k < len) {if (o[k] === searchElement) return true;k++;}return false;};
}

Polyfill 的常見場景

1. JavaScript API
   • Promise、fetch、Array.prototype.includes、Object.assign 等。
2. HTML5 特性
   • <canvas>、<video>、<audio>、localStorage 等。
3. CSS 特性
   • Flexbox、Grid、CSS Variables 等。

Polyfill 的使用方式

1. 手動引入

   • 根據項目需求，手動引入特定的 Polyfill。
   • 示例：

     <script src="https://cdn.polyfill.io/v3/polyfill.min.js"></script>
     

2. 自動檢測和加載

   • 使用工具（如 Polyfill.io）根據瀏覽器的 User-Agent 自動加載所需的 Polyfill。
   • 示例：

     <script src="https://polyfill.io/v3/polyfill.min.js?features=Promise,fetch"></script>
     

3. 通過構建工具

   • 使用 Webpack、Babel 等工具自動注入 Polyfill。
   • 示例（Babel 配置）：

     {"presets": [["@babel/preset-env", {"useBuiltIns": "usage","corejs": 3}]]
     }
     

Polyfill 的優缺點

優點

1. 提高兼容性：讓舊版瀏覽器支持新特性。
2. 減少代碼分支：開發者可以專注于使用現代特性，而不需要為舊版瀏覽器編寫額外的代碼。
3. 漸進增強：優先支持現代瀏覽器，同時為舊版瀏覽器提供回退方案。

缺點

1. 性能開銷：Polyfill 會增加代碼體積和執行時間。
2. 維護成本：需要定期更新 Polyfill 以確保兼容性。
3. 潛在問題：某些 Polyfill 可能無法完全模擬原生特性的行為。

常見的 Polyfill 庫

1. core-js
   • 提供了幾乎所有 JavaScript 新特性的 Polyfill。
   • 官網：https://github.com/zloirock/core-js
2. polyfill.io
   • 根據瀏覽器自動加載所需的 Polyfill。
   • 官網：https://polyfill.io/
3. babel-polyfill
   • Babel 的 Polyfill 包，基于 core-js 和 regenerator-runtime。
   • 注意：Babel 7.4 之后推薦直接使用 core-js 和 regenerator-runtime。

總結

Polyfill 是一種用于在舊版瀏覽器中模擬新特性的代碼。它的工作原理是通過特性檢測，動態加載或執行模擬代碼，從而填補瀏覽器功能的缺失。Polyfill 的使用可以提高代碼的兼容性，但也會帶來一定的性能開銷和維護成本。常見的 Polyfill 庫包括 core-js、polyfill.io 和 babel-polyfill。