L'URI des données et le MHTML résolvent complètement toute la production de pages navigateurs_HTML/Xhtml_web

URI des données

Data URI est un schéma défini par la RFC 2397 pour intégrer de petits fichiers directement dans des documents. Grâce à la syntaxe suivante, vous pouvez convertir un petit fichier dans un encodage spécifié et l'intégrer directement dans la page :

données :[][;base64],

1. MIME-type : Spécifie le MIME des données intégrées. Sa forme est le paramètre [type]/[sous-type] ; Par exemple, le MIME correspondant à une image png est image/png. Le paramètre peut être utilisé pour spécifier des informations supplémentaires. Dans la plupart des cas, il s'agit du paramètre charset utilisé pour spécifier des méthodes de codage de texte telles que text/plain et text/htm. La valeur par défaut est text/plain;charset=US-ASCII.
2. base64 : le codage des données après l'instruction est base64, sinon les données doivent être codées en pourcentage (c'est-à-dire coder en urlen le contenu).

Au siècle dernierHTML4.01 a introduit le schéma d'URI de donnéesÀ partir d'aujourd'huià l'exception d'IE6 et IE7, tous les principaux navigateurs prennent en charge, mais IE8 prend en charge. L'URI des données est encore limité . Il ne prend en charge que les objets (uniquement pour les images), img, input type=image, link et URL en CSS, et la taille des données ne peut pas être supérieure à 32 Ko.

Avantages :

1. Réduisez le nombre de requêtes HTTP, il n'y a pas de consommation de connexion TCP et de limite sur le nombre de navigateurs simultanés sous un même nom de domaine.
2. La bande passante sera réduite pour les petits fichiers. Bien que la quantité de données augmente après le codage, l'en-tête http sera réduit. Lorsque la quantité de données dans l'en-tête http est supérieure à l'incrément de codage du fichier, la bande passante sera réduite.
3. Pour les sites HTTPS, il y aura des invites de sécurité lors de l'utilisation conjointe de HTTPS et HTTP, et HTTPS est plus cher que HTTP, donc l'avantage de l'URI de données à cet égard est plus évident.
4. Vous pouvez enregistrer l'intégralité de la page multimédia sous forme de fichier.

Inconvénients :

1. Ne peut pas être réutilisé. Si le même contenu est appliqué plusieurs fois au même document, il doit être répété plusieurs fois, ce qui augmente la quantité de données et augmente le temps de téléchargement.
2. ne peut pas être mis en cache seul, il sera donc rechargé lorsque le document qui le contient est rechargé.
3. Le client doit re-décoder et afficher, ce qui augmente la consommation de points.
4. La compression des données n'est pas prise en charge, l'encodage base64 augmentera la taille de 1/3 et le volume des données augmentera encore plus après l'urlencodage.
5. Ce n'est pas propice au filtrage des logiciels de sécurité, et il existe également certains risques de sécurité.

MHTML

MHTML est l'abréviation de MIME HTML (MultiPurpose Internet Mail Extension HTML), qui est une solution définie par la RFC 2557 pour enregistrer tout le contenu d'une page multimédia dans le même document. Cette solution a été proposée par Microsoft pour la prendre en charge à partir d'IE5.0, et Opera9.0 a également commencé à la prendre en charge. Safari peut enregistrer le fichier au format .mht (suffixe de fichier MHTML), mais ne prend pas en charge son affichage.

MHTML est relativement similaire à Data URI. Il a des fonctions plus puissantes et une syntaxe plus complexe, et n'a pas l'inconvénient de "ne peut pas être réutilisé" dans Data URI. Cependant, MHTML n'est pas flexible et pratique à utiliser, comme par exemple. l'URL des références de ressources. Il peut s'agir d'une adresse relative dans le fichier mht, sinon ce doit être une adresse absolue. 《Images codées en Base64 dans plusieurs navigateurs intégrées dans HTML》La solution pour IE utilise un chemin relatif car le type de contenu : message/rfc822 est déclaré afin qu'IE l'analyse selon MHTML si le contenu ne l'est pas. Le type modifié nécessite l'utilisation du protocole MHTML. Dans ce cas, le chemin absolu doit être utilisé, tel que 《MHTML – lorsque vous avez besoin de données : URI dans IE7 et sous》.

Postuler

La combinaison de Data URI et MHTML peut résoudre complètement le problème de tous les navigateurs grand public. Puisqu'ils ne peuvent pas être mis en cache et réutilisés, ils ne conviennent pas à une utilisation directe dans les pages, mais ils conviennent à une utilisation dans les fichiers CSS et JavaScript. Une utilisation appropriée des images présente de grands avantages :

1. Réduisez considérablement le nombre de requêtes. Désormais, le CSS des grands sites Web fait référence à un grand nombre de ressources d'images.
2. CSS et JavaScript peuvent être mis en cache, réalisant indirectement la mise en cache des données.
3. L'utilisation de CSS peut résoudre le problème de la réutilisation des URI des données
4. AdieuSprites CSS, les Sprites CSS semblaient réduire le nombre de requêtes, mais en plus de apporter des exceptions dans des situations incertaines, les Sprites CSS nécessitent également des images artificielles Fusion, même s'il y a est un outil de fusion, nécessite encore beaucoup de temps pour résoudre efficacement des puzzles et entraîne des difficultés de maintenance. Lorsque vous suivez certains principes de conception, vous pouvez abandonner complètement les Sprites CSS pour écrire du CSS, et enfin utiliser des outils pour convertir les images en URI de données et MHTML lors du téléchargement sur le serveur, comme "Utiliser data-uri pour fusionner les feuilles de style et L'outil implémenté en python dans l'image " peut faire gagner beaucoup de temps.
5. L'encodage Base64 augmente le fichier image de 1/3. L'utilisation simultanée de Data URI et de MHTML équivaut à une augmentation de 2/3, mais CSS et JavaScript peuvent utiliser la compression gzip, ce qui peut économiser 2/3 du fichier. volume de données, utilisez donc Le volume de données final après compression gzip est (1 1/3) * 2 * (1/3) = 8/9, donc le trafic final est réduit.

Afin de faciliter l'implémentation des URI de données et MHTML en CSS, j'ai écrit un Générateur d'URI de données et MHTML Vous pouvez voir l'exemple d'application d'URI de données et MHTML généré.

Lors de l'utilisation de MHTML dans un fichier CSS, l'URL doit utiliser un chemin absolu, ce qui est très rigide, vous pouvez donc envisager d'utiliser une expression CSS pour le résoudre (DEMO), telle que :

/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/ get-right-url-from-html/
*/
*background-image:expression(function(ele){
ele.style.backgroundImage = 'url(mhtml:'
document. getElementById('data-uri-css').getAttribute('href',4)