Значки: использовать Data-URI или встроенные шрифты?

Question

У меня есть набор из 10 монотонных иконок размером 25x25 или меньше. Который имеет лучшую производительность:

1) Вставить их в CSS с URI данных

2) Загрузите их как шрифт ( IcoMoon и т. Д.)

Загрузка в виде шрифта может показаться менее выгодной, поскольку она выполняет вызов http: если я... 2b) Встраивать файлы шрифтов самостоятельно.

В прошлом месяце я использовал IcoMoon для этого проекта, но это немного утомительно, если мне нужно внести изменения в SVG и повторно загрузить в приложение. CSS также немного запутан, когда имеешь дело со шрифтами и изображениями. Кажется, я мог бы сэкономить головную боль с помощью base64-кодирования SVG и покончить с этим.

Так что бы вы сказали, это лучший способ? Или альтернатива этим? Я оптимизирую для Webkit, Mozilla и IE8+.

Answer 1

Это зависит ™.

Кажется, что URI данных медленнее на мобильных устройствах, но значки менее 1 КБ могут иметь лучшую производительность при внедрении. Это также зависит от того, как часто изображения используются для каждой страницы - очевидно, что URI данных необходимо распаковывать при каждом использовании, поэтому, если вы используете их много раз на странице, это может повлиять на производительность.

К сожалению, похоже, что никто еще не сравнивал URI данных и шрифты значков @font-face для производительности мобильных устройств. В идеале, проведите некоторое реальное RUM-тестирование и опубликуйте свои результаты ^_^ Если вы это сделаете, пожалуйста, проверьте также встраивание шрифта иконки в CSS как URI данных в кодировке Base64:D

Наконец, есть несколько плагинов Grunt, которые могут автоматизировать рабочий процесс для вас, и используя [data-icon]-стиль встраивания для значка шрифта уменьшает CSS беспорядок (attr() поддерживается в IE8+).

• Почему Инлининг не является ответом - Гай Подъярный, Perf Planet 2011
• CSS-спрайты и данные URI: что быстрее на мобильных устройствах? - Питер МакЛахлан, 29 августа 2013 г.

PS Извините за тур, я тоже хочу эту информацию…