Сайт YanKaven : http://dancewithnet.com/
URI данных
URI данных — это схема, определенная в RFC 2397, для встраивания небольших файлов непосредственно в документы. С помощью следующего синтаксиса вы можете преобразовать небольшой файл в указанную кодировку и встроить его непосредственно на страницу:
data:[<MIME-тип>][;base64],<данные>
- MIME-тип: указывает MIME внедренных данных. Его форма — параметр [тип]/[подтип]. Например, MIME, соответствующий изображению в формате PNG, — image/png. Параметр можно использовать для указания дополнительной информации. В большинстве случаев это параметр charset, используемый для указания методов кодирования текста, таких как text/plain и text/htm. По умолчанию используется text/plain;charset=US-ASCII.
- base64: Кодировка данных, следующих за оператором, — base64 , в противном случае данные должны быть закодированы в процентах (то есть urlencode содержимого).
В HTML 4.01 схема URI данных появилась в прошлом веке. На сегодняшний день все основные браузеры, кроме IE6 и IE7, поддерживают ее . Однако IE8 по-прежнему имеет ограничения в поддержке URI данных . Он поддерживает только объекты (только изображения). img, тип ввода = изображение, ссылка и URL-адрес в CSS, а размер данных не может превышать 32 КБ.
преимущество:
- Уменьшите количество HTTP-запросов , и для одного и того же доменного имени не будет ограничений на потребление TCP-соединений и одновременную работу браузера.
- Пропускная способность будет уменьшена для небольших файлов. Хотя объем данных увеличится после кодирования, заголовок http будет уменьшен. Когда объем данных в заголовке http превышает приращение кодирования файла, полоса пропускания будет уменьшена.
- Для сайтов HTTPS будут появляться запросы безопасности, когда HTTPS и HTTP смешаны, а HTTPS дороже, чем HTTP, поэтому Data URI имеет более очевидные преимущества в этом отношении.
- Всю мультимедийную страницу можно сохранить в виде файла.
недостаток :
- Его нельзя использовать повторно. Если один и тот же контент применяется к одному и тому же документу несколько раз, его необходимо повторять несколько раз, что значительно увеличивает объем данных и увеличивает время загрузки.
- Он не может быть кэширован сам по себе, поэтому его необходимо перезагрузить при перезагрузке содержащего его документа.
- Клиенту необходимо перекодировать и отображать, что увеличивает расход баллов.
- Сжатие данных не поддерживается, кодировка base64 увеличит размер на 1/3, а объем данных увеличится еще больше после urlencoding.
- Это не способствует фильтрации программного обеспечения безопасности, а также существуют определенные риски для безопасности.
МНТМЛ
MHTML — это аббревиатура MIME HTML (многоцелевое расширение почты Интернета HTML) . Это решение, определенное в RFC 2557, для сохранения всего содержимого мультимедийной страницы в одном документе. Это решение было предложено Microsoft для его поддержки, начиная с IE5.0, и Opera9.0 также начала его поддерживать. Safari может сохранять файл в формате .mht (суффикс файла MHTML), но не поддерживает его отображение.
MHTML относительно похож на URI данных, с более мощными функциями и более сложным синтаксисом и не имеет недостатка «невозможность повторного использования» в URI данных. Однако MHTML не является гибким и удобным в использовании. Например, URL-адрес. ссылка на ресурс в файле mht может быть относительным адресом, в противном случае это должен быть абсолютный адрес. Решение хеджера для IE в «Кросс-браузерные изображения в кодировке Base64, встроенные в HTML» использует относительный путь, поскольку объявлен тип контента: message/rfc822, чтобы IE анализировал его в соответствии с MHTML. Если вы не измените тип контента, вам нужно. для использования протокола MHTML в настоящее время необходимо использовать абсолютные пути, например «MHTML — когда вам нужны данные: URI в IE7 и более ранних версиях» .
приложение
Комбинация URI данных и MHTML может полностью решить проблему всех основных браузеров. Поскольку их нельзя кэшировать и повторно использовать, они не подходят для использования непосредственно на странице, но их можно использовать соответствующим образом для изображений в файлах CSS и JavaScript. Есть большие преимущества в использовании:
- Количество запросов значительно сократилось. Теперь CSS крупных сайтов обращается к большому количеству графических ресурсов.
- И CSS, и JavaScript можно кэшировать, косвенно реализуя кэширование данных.
- Использование CSS может решить проблему повторного использования URI данных.
- Попрощайтесь с CSS-спрайтами . Появление CSS-спрайтов призвано уменьшить количество запросов. Однако CSS-спрайты не только вызывают исключения при неопределенных обстоятельствах , но и требуют искусственного слияния изображений. Даже если есть инструмент слияния, он все равно должен быть. искусственно эффективны. Головоломки отнимают много времени и затрудняют обслуживание. Если вы следуете определенным принципам проектирования, вы можете полностью отказаться от CSS-спрайтов для написания CSS и, наконец, использовать инструменты для преобразования изображений в Data URI и MHTML при загрузке на сервер, например «Использование data-uri для объединения таблиц стилей и изображений». инструменты, реализованные на Python, это может сэкономить много времени.
- Кодировка Base64 увеличивает файл изображения на 1/3. Одновременное использование Data 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 . Вы можете увидеть пример его использования для генерации Data URI и MHTML .
При использовании MHTML в файле CSS URL-адрес должен использовать абсолютный путь, что очень негибко, поэтому вы можете рассмотреть возможность использования выражения CSS для решения этой проблемы ( DEMO ), например:
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*background-image:выражение(функция(ele){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(этот));
Исходный текст: http://dancewithnet.com/2009/08/15/data-uri-mhtml/
