Данные URI Data URI - это решение, определяемое RFC 2397 для встроенного небольших файлов непосредственно в документы. С помощью следующего синтаксиса вы можете превратить небольшие файлы в указанные кодировки и непосредственно встроить их в страницу:
Данные: [<mime-type>] [; base64], <datans>
- Тип MIME: указывает MIME встроенных данных. Его форма [тип]/[подтип]; Параметр, например, MIME, соответствующий изображению PNG, является изображением/PNG. Параметр может использовать дополнительную информацию для указания параметров Charset для текста/простого и текста/HTM и т. Д.
- BASE64: Объявите кодирование последующих данных Base64, в противном случае данные должны быть закодированы с процентным числом (то есть Urlencode the Content).
В прошлом веке HTML4.01 представил решение URI. По сей день все основные браузеры, за исключением поддержки IE6 и IE7, но IE8 по -прежнему имеет ограничения на поддержку URI DATA, только вспомогательный объект (только когда изображения), IMG, входной тип = изображение, ссылка и CSS, а объем данных не может быть больше 32 тыс..
преимущество:- Уменьшите количество HTTP -запросов, без ограничения потребления соединения TCP и количества параллельных браузеров под одним и тем же доменным именем.
- Для небольших файлов пропускная способность будет уменьшена. Хотя объем данных будет увеличиваться после кодирования, заголовок HTTP уменьшается. Когда объем данных заголовка HTTP больше, чем приращение кодирования файла, пропускная способность будет уменьшена.
- Для HTTPS -сайтов будут предоставлены защитные подсказки для смешивания HTTPS и HTTP, а HTTPS дороже, чем HTTP, поэтому в этом отношении есть более очевидные преимущества.
- Вы можете сохранить всю мультимедийную страницу в качестве файла.
недостаток :
- Это не может быть повторно использовано. Если один и тот же документ применяет один и тот же контент несколько раз, его необходимо повторить несколько раз, и объем данных значительно увеличивается, что увеличивает время загрузки.
- Его нельзя кэшировать в одиночку, поэтому его также необходимо перезагрузить, когда он содержит перезагрузку документов.
- Клиент должен восстановить и отображать, что увеличивает потребление.
- Сжатие данных не поддерживается, кодирование BASE64 увеличится на 1/3 от размера, а количество данных увеличится после Urlencode.
- Это не способствует фильтрации программного обеспечения для безопасности, но также имеет определенные риски безопасности.
MHTML MHTML - это аббревиатура MIME HTML (многоцелевое расширение интернет -почты HTML), которое определяется RFC 2557, чтобы сохранить все содержимое страницы мультимедиа в одном и том же документе. Это решение было предложено Microsoft для поддержки его с тех пор, как IE5.0, а Opera9.0 также начала его поддерживать. Safari может сохранить файл в .mht (суффикс файла MHTML), но не поддерживает его отображение.
MHTML и DATA URI схожи, с более мощными функциями и более сложным синтаксисом, и не имеют недостатков, которые нельзя использовать в URI Data, но MHTML не является гибким и достаточно удобным для использования. Например, URL -адрес, упомянутый на ресурс, может быть относительным адресом в файле MHT, в противном случае он должен быть абсолютным адресом. Решение Хедгера для IE в «Cross Brower Base Base64-кодированных изображениях, встроенных в HTML», использует относительные пути, поскольку он объявляет тип контента: сообщение/RFC822, чтобы сделать IE parse в соответствии с MHTML. Если тип контента не изменен, требуется протокол MHTML. В настоящее время должны использоваться абсолютные пути, такие как «MHTML - когда вам нужны данные: URI в IE7 и под».
приложение Комбинация данных URI и MHTML может полностью решить все основные браузеры. Из -за дефектов кэширования и повторного использования они не подходят для непосредственного использования на страницах. Тем не менее, они имеют большие преимущества в соответствующем использовании изображений в файлах CSS и JavaScript:
- Количество запросов было значительно сокращено, и CSS крупных веб -сайтов теперь ссылается на большое количество ресурсов изображений.
- Как CSS, так и JavaScript могут быть кэшированы, косвенно реализуя кэширование данных.
- Использование CSS может решить проблему повторного использования DATA URI
- Показывайте прощай с спрайтами CSS, казалось, что спрайты CSS уменьшают количество запросов, но в дополнение к исключениям в неопределенных ситуациях, спрайты CSS также требуют искусственного слияния изображения. Даже если есть инструмент слияния, он все равно должен искусственно тратить много времени на то, как эффективно загадочно озадачиваться и приносить трудности с техническим обслуживанием. После того, как вы следуете определенным принципам дизайна, вы можете полностью отказаться от Sprites CSS для записи CSS и, наконец, использовать инструменты для преобразования изображений в URI Data URI и MHTML во время загрузки на сервер, такие как инструменты, реализованные в Python, в «Использование листов и картинок слияния Data-URI», которые могут сэкономить много времени.
- Кодирование BASE64 увеличивает файл изображения на 1/3, а использование данных URI и MHTML одновременно эквивалентно увеличению 2/3. Тем не менее, CSS и JavaScript могут использовать сжатие GZIP, которое может сохранить 2/3 объема данных, поэтому окончательный объем данных после использования сжатия GZIP составляет (1 + 1/3) * 2 * (1/3) = 8/9, поэтому конечный трафик уменьшается.
Чтобы облегчить реализацию DATA URI и MHTML в CSS, я написал генератор DATA URI & MHTML, который вы можете использовать для генерации данных приложений URI & MHTML.
При использовании MHTML в файлах CSS URL должен использовать абсолютный путь, который делает его очень негибким. Следовательно, вы можете рассмотреть возможность использования CSS Expression для решения (демонстрации), например:
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*Facking-Image: Expression (function (ele) {
ele.style.backgroundimage = 'url (mhtml:' +
document.getElementById ('Data-URI-CSS'). getAttribute ('href', 4) +
'! 03114501408821761.gif)';
}(этот));
