Всякий раз, когда вы загружаете веб-страницу, ваш веб-браузер инициирует несколько сетевых подключений. Если какое-либо из этих соединений прервется, вы будете смотреть на индикатор прогресса загрузки вашего браузера в течение очень долгого периода времени. Вот почему сокращение количества HTTP-запросов, которые браузер должен выполнить для завершения загрузки страницы, является фундаментальным шагом в оптимизации скорости веб-сайтов. Один (возможно, недостаточно используемый) способ сделать это — встроить двоичные данные, такие как изображения для часто используемых значков, в линию с другими активами, используя схему data: URI.
Отправить это data: прямой
На обычной веб-странице наиболее распространенным видом внешнего ресурса является файл изображения. Используя такие методы, как спрайты CSS , которые объединяют множество изображений в один физический файл, а затем используют CSS для отображения только части изображения за один раз, вы можете значительно сократить количество внешних ресурсов, вызываемых вашими веб-страницами. Однако все эти методы все еще требуют, по крайней мере, одного дополнительного HTTP-запроса GET , а также его служебных данных и возможного нового соединения TCP.
Для максимальной оптимизации производительности мы можем избавиться даже от этого HTTP-запроса, встроив изображение (или другой внешний ресурс) непосредственно в файл HTML или CSS (или другой вид), используя схему data: URI. Схема data: URI определена в RFC 2397 IETF с 1998 года, хотя на сегодняшний день ее поддерживают только некоторые основные браузеры. В частности, браузеры на основе Gecko и WebKit, такие как Firefox, Safari и Chrome, а также Opera поддерживают его использование, но не Internet Explorer 5–7 . Вместе с тем, наряду с « таблицами CSS », Internet Explorer 8 наконец-то добавил в него некоторую поддержку .
Когда реализации схемы data: URI наконец-то стали повсеместными, веб-разработчики и, скорее всего, авторы фреймворков могут начать использовать ее для повышения производительности своего интерфейсного кода. Вот как это сделать.
data: грязные детали
Синтаксис data: схема выглядит следующим образом:
data:[< MIME-type >][; encoding ],< data >
Другими словами, встроенный двоичный ресурс начинается со строкового литерала data: Сразу после этого указывается необязательный тип MIME и аналогично необязательная кодировка. Если кодировка указана, ей предшествует точка с запятой ( ; ). Пропуск этих токенов делает их значениями по умолчанию text/plain;charset=US-ASCII . Затем, наконец, запятая ( , ) отделяет эти свойства от фактических закодированных двоичных данных, которые помещаются в конце.
Так как это просто хороший старый URI, вы можете использовать встроенные data: везде, где вы можете поместить ссылку на URI в документ. Это означает, что вы можете использовать их в атрибуте src элемента <img> , в значениях CSS url() и т. Д. По слухам, за заметным исключением IE8, вы можете даже вставлять любые другие виды двоичных данных, а не только изображения. (IE, вероятно, ограничит виды двоичных данных, которые он поддерживает внутри data: URI в целях безопасности.)
Вот выдержка из того, как встраивание изображения PNG может выглядеть внутри таблицы стилей CSS. В этом примере мы устанавливаем свойство list-style-image элемента list-style-image для отображения пользовательского изображения в поле маркера элемента списка. (Конечно, закодированные данные, начинающиеся с iVBORw… в приведенном ниже коде, будут длиннее, чтобы предоставить полное изображение.)
ul li { list-style-image: url(data:image/png;base64,iVBORw…); }
Получение data: из ваших изображений
Существует ряд свободно доступных инструментов, которые вы можете использовать для построения части или всех data: URI для вас.
- DataURLMaker — это веб-форма, которая принимает файл изображения в качестве входных данных и создает элемент HTML
<img>, атрибутsrcкоторого представляет собойdata:URI, который вам нужен. - Ян Хиксон также поддерживает инструмент под названием data: URI kitchen, который делает то же самое.
Естественно, если у вас есть доступ к языку программирования на стороне сервера, вы также можете создавать эти URI на лету самостоятельно. В WikiPedia есть пример запуска файла изображения через base64_encode() PHP base64_encode() для создания data: URI. Другие языки имеют аналогичные функции.
Плюсы и минусы: к data: или нет к data:
Большинству веб-сайтов, вероятно, не понадобится такая оптимизация. Конечно, существуют проблемы с удобством сопровождения, связанные с жестким кодированием ресурсов в виде двоичных данных на ваших веб-страницах, поэтому существует компромисс. Однако я могу предвидеть много случаев, когда это может пригодиться.
Возможно, одним из таких случаев является создание CSS-фреймворка. Такие клиентские структуры предназначены для кэширования и могут включать в себя стандартизированный графический словарь. Такие визуальные словари уже широко распространены в Интернете сегодня, как в случае значков для таких вещей, как папки в файловой системе, лицензии Creative Commons или символ RSS-канала . В тех случаях, когда изменения маловероятны или медленны, ремонтопригодность не может быть такой большой проблемой. Поэтому прямое кодирование бинарных ресурсов, таких как эти изображения, в определенные таблицы стилей может иметь большой смысл с точки зрения производительности.
Другим смягчающим фактором является возможность пост-обработки исходных файлов, как это часто делается при минимизации JavaScript . Эти дополнительные этапы сборки могут показаться, что предварительные усилия не стоят того, но это именно то, что должны делать дальновидные разработчики, чтобы помочь себе в будущем.
Конечно, поскольку Internet Explorer по-прежнему плохо работает со схемой data: URI, мы не можем в полной мере воспользоваться потенциальными преимуществами его использования сегодня. Тем не менее, даже если вы не можете сделать это сейчас, полезно знать о возможностях, если вам потребуется повышение производительности в будущем.