Site de YanKaven : http://dancewithnet.com/
URI de dados
URI de dados é um esquema definido pela RFC 2397 para incorporar pequenos arquivos diretamente em documentos. Através da sintaxe a seguir, você pode converter um arquivo pequeno em uma codificação especificada e incorporá-lo diretamente na página:
dados:[<tipo MIME>][;base64],<dados>
- Tipo MIME: especifica o MIME dos dados incorporados. Sua forma é o parâmetro [type]/[subtype]; por exemplo, o MIME correspondente a uma imagem png é image/png. O parâmetro pode ser usado para especificar informações adicionais. Em mais casos, é o parâmetro charset usado para especificar métodos de codificação de texto, como text/plain e text/htm. O padrão é text/plain;charset=US-ASCII.
- base64: A codificação dos dados após a instrução é base64 , caso contrário, os dados deverão ser codificados por porcentagem (ou seja, codificar em urlencode o conteúdo).
HTML 4.01 introduziu o esquema URI de dados no século passado , todos os navegadores convencionais, exceto IE6 e IE7, o suportam . No entanto, o IE8 ainda tem limitações em seu suporte para URI de dados . img, input type=image, link e URL em CSS, e o tamanho dos dados não pode ser maior que 32K.
vantagem:
- Reduza o número de solicitações HTTP e não haverá consumo de conexão TCP e limite de simultaneidade do navegador sob o mesmo nome de domínio.
- A largura de banda será reduzida para arquivos pequenos. Embora a quantidade de dados aumente após a codificação, o cabeçalho http será reduzido. Quando a quantidade de dados no cabeçalho http for maior que o incremento da codificação do arquivo, a largura de banda será reduzida.
- Para sites HTTPS, haverá avisos de segurança quando HTTPS e HTTP forem misturados, e HTTPS é mais caro que HTTP, portanto, o URI de dados tem vantagens mais óbvias nesse aspecto.
- Toda a página multimídia pode ser salva como um arquivo.
deficiência :
- Não pode ser reutilizado. Se o mesmo conteúdo for aplicado várias vezes ao mesmo documento, ele precisará ser repetido várias vezes, o que aumenta muito a quantidade de dados e o tempo de download.
- Ele não pode ser armazenado em cache sozinho, portanto deve ser recarregado quando o documento que o contém for recarregado.
- O cliente precisa recodificar e exibir, o que aumenta o consumo de pontos.
- A compactação de dados não é suportada, a codificação base64 aumentará o tamanho em 1/3 e o volume de dados aumentará ainda mais após a codificação urlen.
- Não favorece a filtragem de software de segurança e também existem certos riscos de segurança.
HTML
MHTML é a abreviatura de MIME HTML (Multipurpose Internet Mail Extension HTML) . É uma solução definida pela RFC 2557 para salvar todo o conteúdo de uma página multimídia no mesmo documento. Esta solução foi proposta pela Microsoft para suportá-la a partir do IE5.0, e o Opera9.0 também passou a suportá-la. O Safari pode salvar o arquivo no formato .mht (sufixo de arquivo MHTML), mas não oferece suporte para exibi-lo.
MHTML é relativamente semelhante ao URI de dados, com funções mais poderosas e sintaxe mais complexa, e não tem a desvantagem de "não poder ser reutilizado" no URI de dados. No entanto, o MHTML não é flexível e conveniente de usar. uma referência de recurso está no arquivo mht pode ser um endereço relativo, caso contrário, deve ser um endereço absoluto. A solução do hedger para IE em "Cross Browser Base64 Encoded Images Embedded in HTML" usa um caminho relativo porque Content-type: message/rfc822 é declarado para que o IE o analise de acordo com MHTML. Se você não modificar o Content-type, será necessário. para usar o protocolo MHTML, caminhos absolutos devem ser usados neste momento, como "MHTML – quando você precisar de dados: URIs no IE7 e abaixo" .
aplicativo
A combinação de URI de dados e MHTML pode resolver completamente o problema de todos os navegadores convencionais. Como não podem ser armazenados em cache e reutilizados, não são adequados para uso direto na página, mas podem ser usados adequadamente para imagens em arquivos CSS e JavaScript. Existem grandes vantagens em usar:
- O número de solicitações é bastante reduzido. Agora o CSS de grandes sites refere-se a um grande número de recursos de imagem.
- Tanto CSS quanto JavaScript podem ser armazenados em cache, implementando indiretamente o cache de dados.
- Usar CSS pode resolver o problema de reutilização de URI de dados
- Diga adeus aos Sprites CSS . O surgimento dos Sprites CSS é para reduzir o número de solicitações. Porém, além de trazer exceções em circunstâncias incertas , os Sprites CSS também exigem fusão artificial de imagens. artificialmente eficazes. Os quebra-cabeças levam muito tempo e dificultam a manutenção. Ao seguir certos princípios de design, você pode abandonar completamente CSS Sprites para escrever CSS e, finalmente, usar ferramentas para converter imagens em URI de dados e MHTML ao fazer upload para o servidor, como "Usando data-uri para mesclar folhas de estilo e imagens" Usando ferramentas implementadas em python, isso pode economizar muito tempo.
- A codificação Base64 aumenta o arquivo de imagem em 1/3. Usar URI de dados e MHTML ao mesmo tempo equivale a um aumento de 2/3. No entanto, CSS e JavaScript podem usar compactação gzip, o que pode economizar 2/3 do volume de dados. , portanto, usando a compactação gzip, a quantidade final de dados é (1 + 1/3) * 2 * (1/3) = 8/9, portanto, o tráfego final é reduzido.
Para facilitar a implementação de URI de dados e MHTML em CSS, escrevi um gerador de URI de dados e MHTML . Você pode ver o exemplo de aplicação para gerar URI de dados e MHTML .
Ao usar MHTML em um arquivo CSS, a URL deve usar um caminho absoluto, que é muito inflexível, então você pode considerar usar uma expressão CSS para resolvê-lo ( DEMO ), como:
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*imagem de fundo:expressão(função(ele){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(esse));
Texto original: http://dancewithnet.com/2009/08/15/data-uri-mhtml/
