Полифил — это фрагмент кода, скрипт или отдельная библиотека, которая внедряет в устаревшие обозреватели интернета поддержку современных способностей языков, кода или библиотек. В современных обозревателях поддержка таких возможностей встроена по умолчанию. Для разработчиков полифил дает возможность писать не просто кросс-браузерные приложения, а приложения, которые будут работать и в самых старых версиях браузера.
Напомним, кросс-браузерность — это способность приложения одинаково хорошо работать в разных браузерах:
Google Chrome;
Firefox;
Safari;
Edge;
Opera;
и др.
Но проблема в том, что у всех этих браузеров есть новые и старые версии. Часто когда разработчики создают кросс-браузерное приложение, они тестируют и адаптируют его под новые версии браузеров, предполагая, что большинство пользователей их приложения используют именно эти версии интернет-обозревателей. Но есть часть пользователей, которые до сих пор используют старые типы этих браузеров. А в старых версиях нет поддержки современных возможностей языков и библиотек. Поэтому в них приложение будет работать некорректно. Чтобы исправить эту ситуацию, на помощь приходит полифил.
Полифил — что это?
Полифил часто относят к языку JavaScript, так как именно этот язык является основным для браузерной разработки. JavaScript — это язык, который постоянно развивается, поэтому в нем постоянно появляются новые фичи и возможности. Для того чтобы эти фичи заработали, их поддержку нужно добавить в браузер. Поддержка новых фич JS добавляется во время обновления браузеров. Таким образом складывается ситуация, что новые версии браузеров поддерживают новые возможности языка, а старые нет.
Пользователей на старых версиях браузеров очень мало. По разным подсчетам, примерно 1-3% от всех пользователей интернета. С одной стороны, цифра маленькая, но с другой стороны, часто в эти «проценты» входят не рядовые пользователи. Большинство из этих «процентов» — это сотрудники каких-то компаний, где до сих пор используют старые компьютеры, возможно даже с Windows XP и браузером Internet Explorer или браузерами Chrome, Firefox, Opera, но старых версий. Новые версии браузеров они не могут установить, так как они не запустятся в старых версиях операционной системы. А операционная система не меняется по корпоративным причинам.
Полифил помогает адаптировать программу под таких пользователей. Потому что в ряде случаев их никак нельзя «упускать», хоть их и очень мало. Раз они «представители» какого-то бизнеса, значит приложения бизнес-тематики обязательно нужно адаптировать под них, чтобы не терять их как клиентов.
Как реализовать полифил?
Во-первых, нужно определить для каких типов браузера нужно организовать поддержку той или иной возможности современного обозревателя. Для этого нужно исследовать собственных потенциальных клиентов. Самыми «древними» браузерами считаются Internet Explorer. Они у же много лет не развиваются и никем не поддерживаются, но ими до сих пор пользуются чуть менее 1% пользователей. Скорее всего, это пользователи корпоративных Windows XP.
Почему важно определять для каких пользователей и браузеров нужно использовать полифил JS? Полифил — так или иначе, но это дополнительный код в программе, из-за которого падает производительность программы. Лишний код — лишние проблемы, а проблемы не нужны никому. Поэтому, если использовать полифил, тогда делать это нужно «точечно», под конкретных пользователей конкретных браузеров.
Вообще, использовать полифил не рекомендовано, как раз из-за того, что из-за обилия лишнего кода падает производительность программы. Если есть реальная потребность охватить пользователей старых браузеров, тогда рекомендовано писать отдельный нативный код для тех браузеров. Да, это «двойная работа», но такой подход будет намного лучше, чем использовать полифил.
Если нет возможности писать отдельное приложение для старых браузеров, тогда можно попробовать асинхронный подход. В этом случае в программе прописывается небольшой скрипт, который проверяет наличие фичи в браузере, но в то же время синхронно подключает скрипт полифила. Если в браузере есть фича, тогда запускается работа скрипта, если фичи нет, тогда запускается работа полифила. По итогу, современный браузер код полифила «пропустит» и будет выполнять основной код программы, а старые браузеры будут ждать код полифилов, чтобы продолжить работать. В таком подходе может показаться, что старые браузеры будут работать очень медленно. Но дело в том, что старые браузеры чаще всего установлены на старых компьютерах с «низкими» параметрами. Поэтому существенного «торможения» пользователи старых компьютеров не заметят. А в современных обозревателях интернета, «торможения» не будет происходить.
Как выглядит полифил?
Давайте рассмотрим распространенную ситуацию, когда необходимо организовать поддержку DOM-компонента «firstElementChild» в IE8. Прочие разновидности браузеров это свойство уже давно поддерживают.
Пример скрипта:
if (document.documentElement.firstElementChild === undefined) { // (1)
Object.defineProperty(Element.prototype, 'firstElementChild', { // (2)
get: function() {
var el = this.firstChild;
do {
if (el.nodeType === 1) {
return el;
}
el = el.nextSibling;
} while (el);
return null;
}
});
}
После запуска описанного скрипта, «firstElementChild» появляется у всех компонентов в Internet Explorer.
Заключение
Полифил JS — это дополнительный скрипт, который помогает «подключать» к старым версиям браузеров возможности их новых собратьев. Один полифил создается для одной конкретной фичи, которую нужно подключить. Полифилы бывают разные, но все они создаются по простому шаблону:
Первым делом проверяется, есть ли в браузере необходима фича.
Если фичи нет, тогда создается ее эмуляция.
Полифил лучше не применять, так как это усложняет и «тормозит» код в любом случае. Нативный код для старых браузеров будет работать быстрее, чем код для новых браузеров с полифилами. Поэтому применять полифил нужно в том случае, когда нет другой возможности адаптировать приложение под старую версию какого-то браузера.
Другое
