Site Internet de YanKaven : http://dancewithnet.com/
URI des données
L'URI de données 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 :[<type MIME>][;base64],<données>
- Type MIME : 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.
- base64 : le codage des données qui suivent l'instruction est base64 , sinon les données doivent être codées en pourcentage (c'est-à-dire coder le contenu en urlen).
HTML 4.01 a introduit le schéma Data URI au siècle dernier. À l'heure actuelle , tous les navigateurs traditionnels, à l'exception de IE6 et IE7, le prennent en charge . Cependant, IE8 a encore des limites dans sa prise en charge des Data URI . img, type d'entrée = image, lien et URL en CSS, et la taille des données ne peut pas être supérieure à 32 Ko.
avantage:
- Réduisez le nombre de requêtes HTTP et il n'y a pas de limite de consommation de connexion TCP ni de limite de concurrence de navigateur sous le même nom de domaine.
- 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.
- Pour les sites HTTPS, il y aura des invites de sécurité lorsque HTTPS et HTTP sont mélangés, et HTTPS est plus cher que HTTP, donc Data URI présente des avantages plus évidents à cet égard.
- La page multimédia entière peut être enregistrée sous forme de fichier.
lacune :
- Il 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 considérablement la quantité de données et augmente le temps de téléchargement.
- Il ne peut pas être mis en cache seul, il doit donc être rechargé lorsque le document qui le contient est rechargé.
- Le client doit re-décoder et afficher, ce qui augmente la consommation de points.
- 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.
- Cela ne favorise pas le filtrage des logiciels de sécurité et comporte également certains risques de sécurité.
HTML
MHTML est l'abréviation de MIME HTML (MultiPurpose Internet Mail Extension HTML) . C'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, avec 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. une référence de ressource se trouve dans le fichier mht peut être une adresse relative, sinon elle doit être une adresse absolue. La solution de hedger pour IE dans "Images codées en Base64 dans plusieurs navigateurs intégrées dans HTML" utilise un chemin relatif car Content-type: message/rfc822 est déclaré afin que IE l'analyse selon MHTML. Si vous ne modifiez pas le type de contenu, vous en avez besoin. pour utiliser le protocole MHTML, des chemins absolus doivent être utilisés à ce stade, tels que "MHTML – lorsque vous avez besoin de données : URI dans IE7 et versions antérieures" .
application
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 peuvent pas être utilisés directement dans la page, mais ils peuvent être utilisés de manière appropriée pour les images dans les fichiers CSS et JavaScript. Il y a de grands avantages à utiliser :
- Le nombre de requêtes est considérablement réduit. Désormais, le CSS des grands sites Web fait référence à un grand nombre de ressources d'images.
- CSS et JavaScript peuvent être mis en cache, implémentant indirectement la mise en cache des données.
- L'utilisation de CSS peut résoudre le problème de la réutilisation des URI des données
- Dites adieu aux CSS Sprites .L'émergence des CSS Sprites vise à réduire le nombre de demandes.Mais en plus d' apporter des exceptions dans des circonstances incertaines , CSS Sprites nécessitent également une fusion artificielle d'images. artificiellement efficaces. Les puzzles prennent beaucoup de temps et rendent la maintenance difficile. 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, tels que "Utiliser data-uri pour fusionner des feuilles de style et des images". outils implémentés en python, cela peut faire gagner beaucoup de temps.
- 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. Cependant, CSS et JavaScript peuvent utiliser la compression gzip, ce qui permet d'économiser 2/3 du volume de données. , donc en utilisant la compression gzip La quantité finale de données est (1 + 1/3) * 2 * (1/3) = 8/9, donc le trafic final est réduit.
Afin de faciliter la mise en œuvre de Data URI et MHTML en CSS, j'ai écrit un générateur Data URI & MHTML . Vous pouvez voir l'exemple d'application de son utilisation pour générer des Data URI & MHTML .
Lorsque vous utilisez 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/
*/
*image-de-fond:expression(fonction(ele){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(ce));
Texte original : http://dancewithnet.com/2009/08/15/data-uri-mhtml/
