Data uri Data URI est une solution définie par RFC 2397 pour intégrer les petits fichiers directement dans des documents. Grâce à la syntaxe suivante, vous pouvez transformer de petits fichiers en codages spécifiés et les intégrer directement dans la page:
Données: [<pype MIME>] [; Base64], <sata>
- Type MIME: Spécifie le mime des données intégrées. Sa forme est [type] / [sous-type]; Le paramètre, par exemple, le MIME correspondant à l'image PNG est l'image / PNG. Le paramètre peut utiliser des informations supplémentaires pour spécifier les paramètres de charse pour le texte / la plaine et le texte / htm, etc. La valeur par défaut est le texte / simple; charset = us-ascii.
- Base64: Déclarer le codage des données suivantes est Base64, sinon les données doivent être codées avec un numéro de pourcentage (c'est-à-dire, UrLencode le contenu).
Au siècle dernier, HTML4.01 a introduit la solution de données URI. À ce jour, tous les navigateurs traditionnels sauf la prise en charge d'IE6 et IE7, mais IE8 a toujours des restrictions sur le support des données URI, uniquement l'objet (uniquement lorsque les images), IMG, Type d'entrée = image, lien et CSS, et le volume de données ne peut pas être supérieur à 32K.
avantage:- Réduisez le nombre de demandes HTTP, sans la limite de la consommation de connexion TCP et le nombre concurrentiel de navigateurs sous le même nom de domaine.
- Pour les petits fichiers, la bande passante sera réduite. Bien que la quantité de données augmentera après le codage, l'en-tête HTTP est réduit. Lorsque la quantité de données de l'en-tête HTTP est supérieure à l'augmentation de l'encodage des fichiers, la bande passante sera réduite.
- Pour les sites HTTPS, il y aura des invites de sécurité pour mélanger HTTPS et HTTP, et HTTPS est plus cher que HTTP, donc les données URI présentent des avantages plus évidents à cet égard.
- Vous pouvez enregistrer l'intégralité de la page multimédia en tant que fichier.
Décorbanisme :
- Il ne peut pas être réutilisé. Si le même document applique le même contenu plusieurs fois, il doit être répété plusieurs fois et la quantité de données augmente considérablement, ce qui augmente le temps de téléchargement.
- Il ne peut pas être mis en cache seul, il doit donc également être rechargé lorsqu'il contient des recharges de documents.
- Le client doit redécoder et afficher, ce qui augmente la consommation.
- La compression des données n'est pas prise en charge, le codage de la base64 augmentera de 1/3 de la taille et la quantité de données augmentera davantage après Urlencode.
- Il n'est pas propice au filtrage des logiciels de sécurité, mais présente également certains risques de sécurité.
MHTML MHTML est l'abréviation de MIME HTML (extension de messagerie Internet polyvalente HTML), qui est définie par RFC 2557 pour enregistrer tous les contenus d'une page multimédia au même document. Cette solution a été proposée par Microsoft pour le prendre en charge depuis IE5.0, et Opera9.0 a également commencé à le prendre en charge. Safari peut enregistrer le fichier dans .mht (le suffixe du fichier mhtml), mais ne prend pas en charge l'affichage.
Le MHTML et l'URI de données sont similaires, avec des fonctions plus puissantes et une syntaxe plus complexe, et n'ont pas les inconvénients qui ne peuvent pas être réutilisés dans les données URI, mais le MHTML n'est pas suffisamment flexible et suffisamment pratique pour être utilisé. Par exemple, l'URL référencé à une ressource peut être une adresse relative dans le fichier MHT, sinon il doit être une adresse absolue. La solution de Hedger pour IE dans "Cross Browser Base64 Images codées intégrées dans HTML" utilise des chemins relatifs car il déclare le type de contenu: Message / RFC822 pour faire de l'IE Parse selon MHTML. Si le type de contenu n'est pas modifié, le protocole MHTML est requis. À l'heure actuelle, des chemins absolus doivent être utilisés, tels que "MHTML - Lorsque vous avez besoin de données: uris dans IE7 et Under".
application La combinaison des données URI et MHTML peut résoudre complètement tous les navigateurs traditionnels. En raison des défauts de la mise en cache et de la réutilisation, ils ne conviennent pas directement aux pages. Cependant, ils ont de grands avantages dans l'utilisation appropriée des images dans les fichiers CSS et JavaScript:
- Le nombre de demandes a été considérablement réduit et le CSS des grands sites Web fait désormais référence à un grand nombre de ressources d'image.
- 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 réutilisation des données URI
- Dites adieu aux sprites CSS, les sprites CSS semblent réduire le nombre de demandes, mais en plus d'apporter des exceptions dans des situations incertaines, les sprites CSS nécessitent également une fusion d'images artificielles. Même s'il y a un outil de fusion, il doit toujours consacrer artificiellement beaucoup de temps sur la façon de perger efficacement et de causer des difficultés de maintenance. Après avoir suivi certains principes de conception, vous pouvez abandonner complètement les sprites CSS pour écrire CSS, et enfin utiliser des outils pour convertir les images en données URI et MHTML lors du téléchargement sur le serveur, telles que les outils implémentés dans Python dans "Utilisation de feuilles et d'images de style fusion de données", ce qui peut économiser beaucoup de temps.
- Le codage de base64 augmente le fichier image de 1/3, et l'utilisation des données URI et MHTML en même temps équivaut à une augmentation de 2/3. Cependant, CSS et JavaScript peuvent utiliser la compression GZIP, qui peut économiser 2/3 du volume de données, de sorte que le volume final de données après l'utilisation de la compression GZIP est (1 + 1/3) * 2 * (1/3) = 8/9, donc le trafic final est réduit.
Pour faciliter la mise en œuvre des données URI et MHTML dans CSS, j'ai écrit un générateur de données URI et MHTML, que vous pouvez voir utiliser pour générer des instances d'application URI et MHTML de données.
Lorsque vous utilisez MHTML dans les fichiers CSS, l'URL doit utiliser un chemin absolu, ce qui le rend très inflexible. Par conséquent, vous pouvez envisager d'utiliser l'expression de CSS pour résoudre (démo), comme:
/ *
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/Get-Right-url-from-html/
* /
* Background-Image: Expression (fonction (ele) {
ele.style.backgroundMage = 'URL (MHTML:' +
document.getElementById ('data-uri-css'). getAttribute ('href', 4) +
'! 03114501408821761.gif)';
}(ce));
