Какова цель URI данных?

Почему ресурсы иногда внедряются в URI данных, а не с использованием обычного URI, который ссылается на ресурс, хранящийся в виде файла на сервере?Какова цель URI данных?

источник

2013-08-06 Toby Allen

1. Сокращение сервер запрашивает

данных URI, может быть использован для уменьшения нагрузки на сервер и улучшить производительность клиента, за счет уменьшения числа запросов HTTP, необходимых для приобретения ресурсов. Например, этот HTML:

<img src="assets/bullet.png">

... можно заменить следующим образом:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAA 
    ABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5 
    o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9 
    D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3 
    pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegj 
    eua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38 
    k6jyMAAAAASUVORK5CYII=" 
>

... для получения изображения, как это: bullet icon с один меньше запроса HTTP.

Примечание: невозможно встроить данные URI данных в столбец переполнения стека; однако вышеприведенное изображение было загружено в службу размещения изображений с использованием отображаемого URI данных.

Если, например, ваш сайт использует много маленьких иконок, с указанием их всех, как URI, данные в таблице стилей:

.icon-bullet-red { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAABFklEQVQY022RoW4CURBFD2ETymYFigRDEEgcFoNBIcAj0AQLH0AVfAEOQ0IgCP6C7L5ZWlpBG5o2paJJ01JR/6aCbrI03GTcmZk7c+GfAkj54PqQDsDhkgSuDNQ3njff5vO7bS4XCgx9KJ2B5gReG9D30UiPy6UeFwt96/X0Nps9+FCNw3UDakCfWy37WKvpU7Npv1cr+zEe600msw/AQyAlMJcTbKMmA3pfLOrPeq0PlYoaaGDAFdgJaLwMaAD6OZnoodvV0HEGCKQFwj/IxmED+jWb2Zd2WyWZ7CPgGBhegjeua187Hb0rFNRAOTqwJHAw51ZsZMXAVBIJJ/7nqsA+mhrbMBXIXQrGE2gYGAj0BcoSS/EXVfKm38k6jyMAAAAASUVORK5CYII=) } 
.icon-bullet-green { background-image: /* ... */ } 
.icon-save { background-image: /* ... */ } 
.icon-load { background-image: /* ... */ } 
.icon-delete { background-image: /* ... */ } 
/* ... etc. */

... может устранить большое количество HTTP-запросов, по стоимости в целом размер загрузки, четкость и повышенная вероятность того, что плохое редактирование может сделать URI бессмысленным (и трудно исправить).

Альтернативный метод достижения такого же результата для изображений - использование CSS sprites.

2. Встраивание содержимого в одном файле

данных URI может быть использован, чтобы содержать все ресурсы, необходимые для корректного отображения страницы в одном документе. Это может быть полезным, например, файл README, распространяемый вместе с частью программного обеспечения. Теоретически, URI данных также можно использовать в качестве альтернативы использованию вложений для встраивания ресурсов в электронную почту HTML, но на практике поддержка клиентов для URI данных равна too unreliable, чтобы это было полезным методом.

3. Избежание предупреждения браузера

Некоторые браузеры отображает предупреждение, если страница содержит содержание обслуживало более смесь HTTP и HTTPS. Если ваш сервер настроен таким образом, что статический контент, например изображения, обычно обрабатывается через HTTP, но динамический контент передается через HTTPS, внедрение этого статического контента с URI данных является возможным обходным путем.

источник

2013-08-10 16:43:42

Хороший ответ, возможно, еще один эффект с использованием URI данных состоит в том, что страница загружается как единое целое. Не более предварительная загрузка упрощает HTML. – Mehran

@Mehran благодарит; Я добавил несколько дополнительных случаев использования. –

Единственное предостережение здесь в том, что URI UATA могут на самом деле повредить производительность, поскольку они не кэшируются отдельно от самой страницы, а способ работы браузеров для работы с браузерами не всегда оптимизирован для высокой производительности при обнаружении URI UATA. В качестве наилучшей практики избегайте больших URI данных и избегайте использования URI URI, который не кэшируется в таблице стилей или некотором ресурсе многократного использования. – EricLaw

В дополнение к предыдущему ответу (это очень хорошее резюме), одна вещь, которую я использовал в последнее время, - это шрифты. Если мне нужно использовать только небольшое подмножество символов из шрифта (например, шрифт design-y для логотипа или специальный значок пули dingbat), я могу кодировать только символы, которые мне нужны, в объявление CSS @ font-face и не заставлять пользователя загружать весь файл шрифта.

Например, если я хочу только дьявол (г) и ангел (е) лица из Eggfaces (http://www.dingbatdepot.com/details/EggfacesTFB), то я могу использовать инструмент WebFont генератора FontSquirrel в (http://www.fontsquirrel.com/tools/webfont-generator), чтобы создать что-то вроде этого:

@font-face { 
    font-family: 'eggfaces'; 
    src: url(data:application/x-font-woff;charset=utf-8;base64,ENCODED_FONT_HERE) format('woff'); 
    font-weight: normal; 
    font-style: normal; 
}

См. Эту скрипку для примера: http://jsfiddle.net/vuuVh/

источник

2013-08-14 16:51:07 andi

ответ

Смежные вопросы