Что такое полифил?

# Что такое полифил?

Полифил (polyfill) — это фрагмент кода (обычно JavaScript), который реализует функциональность современного веб-браузера в старых браузерах, которые эту функциональность изначально не поддерживают.

Определение и концепция

Термин «полифил» произошёл от торговой марки Polyfilla — замазки для ремонта стен. В контексте веб-разработки полифил работает по аналогии: он «заполняет» пробелы в функциональности старых браузеров, позволяя разработчикам использовать современные API и возможности без беспокойства о совместимости.

Полифилы позволяют:

• Использовать новые JavaScript методы и API
• Гарантировать функциональность на всех целевых браузерах
• Избежать необходимости писать код дважды (для старых и новых браузеров)
• Постепенно мигрировать на современные технологии

Примеры полифилов

Array.prototype.includes()

В старых браузерах этот метод отсутствовал. Простой полифил:

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

Promise

Promise был введён в ES6/ES2015. Полифилы как es6-promise позволяют использовать промисы в браузерах IE и других старых версиях.

Fetch API

Fetch можно эмулировать через XMLHttpRequest в старых браузерах, хотя это требует более объёмного полифила.

Полифилы vs Транспилация

Важно различать полифилы и транспилацию:

• Транспилация — преобразование синтаксиса современного JavaScript в эквивалент старого синтаксиса (например, Babel преобразует ES6 классы в ES5 функции-конструкторы)
• Полифилы — добавление функциональности через реальную реализацию новых API

Часто требуется и то, и другое. Например, Babel преобразует синтаксис, но для использования встроенных методов нужны полифилы.

Сценарии использования

1. Поддержка старых браузеров

Если проект должен работать в IE11 и более старых версиях Chrome, полифилы необходимы для использования современного API.

2. Градуальное внедрение новых функций

Полифилы позволяют коду работать одинаково независимо от поддержки функции браузером.

3. Реализация экспериментальных API

Для функций в стадии разработки и не поддерживаемых всеми браузерами полифилы обеспечивают решение.

Библиотеки полифилов

• core-js — самая популярная и полная библиотека полифилов
• @babel/polyfill — рекомендуемая Babel библиотека (использует core-js)
• es6-promise — специализированный полифил для Promise
• whatwg-fetch — полифил для Fetch API
• intersection-observer — для IntersectionObserver API

Производительность и рекомендации

Минусы:

• Увеличивают размер бандла
• Могут быть медленнее нативной реализации
• Усложняют отладку

Рекомендации:

1. Загружайте полифилы условно только для браузеров, которые их нужны
2. Используйте сервис Polyfill.io, который динамически подготавливает набор
3. Регулярно переоценивайте необходимость поддержки старых браузеров
4. Используйте core-js вместо множества маленьких полифилов
5. Профилируйте влияние на производительность

Современный подход — использовать инструменты автоматизации, которые генерируют нужные полифилы на основе целевых браузеров (например, @babel/preset-env с правильной конфигурацией targets).