Daten Uri Data URI ist eine von RFC 2397 definierte Lösung, um kleine Dateien direkt in Dokumente einzubetten. Über die folgende Syntax können Sie kleine Dateien in bestimmte Codierungen verwandeln und sie direkt in die Seite einbetten:
Daten: [<Mime-Type>] [; Base64], <Daten>
- MIME-Typ: Gibt die Mime der eingebetteten Daten an. Seine Form ist [Typ]/[Subtyp]; Der Parameter beispielsweise ist der MIME, der dem PNG -Bild entspricht, Bild/PNG. Der Parameter kann zusätzliche Informationen verwenden, um die Zeichenparameter für Text/Ebene und Text/HTM usw. anzugeben. Die Standardeinstellung ist Text/Plain; charSet = US-Ascii.
- Base64: Deklarieren Sie die Codierung der nachfolgenden Daten ist Base64, andernfalls müssen die Daten mit einer prozentualen Zahl codiert werden (dh Urlencode den Inhalt).
Im letzten Jahrhundert führte HTML4.01 die Data URI -Lösung ein. Bis zum heutigen Tag haben alle Mainstream -Browser außer IE6 und IE7 -Unterstützung, aber IE8 hat weiterhin Einschränkungen für die Unterstützung von Daten -URI. Nur unterstütztes Objekt (nur wenn Bilder), IMG, Eingabetyp = Bild, Link und CSS und das Datenvolumen kann nicht mehr als 32 km sein.
Vorteil:- Reduzieren Sie die Anzahl der HTTP -Anfragen, ohne dass der TCP -Verbindungsverbrauch und die Parallelitätszahl der Browser unter demselben Domänennamen.
- Für kleine Dateien wird die Bandbreite reduziert. Obwohl die Datenmenge nach der Codierung zunimmt, wird der HTTP -Header reduziert. Wenn die Datenmenge des HTTP -Headers größer ist als die Erhöhung der Dateicodierung, wird die Bandbreite reduziert.
- Für HTTPS -Sites werden Sicherheitsaufforderungen für das Mischen von HTTPS und HTTP vorhanden sein.
- Sie können die gesamte Multimedia -Seite als Datei speichern.
Mangel :
- Es kann nicht wiederverwendet werden. Wenn dasselbe Dokument denselben Inhalt mehrmals anwendet, muss es mehrmals wiederholt werden und die Datenmenge erhöht sich stark, was die Download -Zeit erhöht.
- Es kann nicht alleine zwischengespeichert werden, daher muss es auch neu geladen werden, wenn es Dokument -Nachladen enthält.
- Der Client muss neu gestaltet und angezeigt werden, wodurch der Verbrauch erhöht wird.
- Die Datenkomprimierung wird nicht unterstützt, die Basis64 -Codierung wird um 1/3 der Größe erhöht, und die Datenmenge steigt nach der Urlencode stärker an.
- Es ist nicht der Filterung von Sicherheitssoftware förderlich, sondern auch bestimmte Sicherheitsrisiken.
MHTML MHTML ist die Abkürzung von MIME HTML (Mehrzweck -Internet -Mail -Erweiterung HTML), die von RFC 2557 definiert ist, um alle Inhalte einer Multimedia -Seite auf demselben Dokument zu speichern. Diese Lösung wurde von Microsoft vorgeschlagen, um sie zu unterstützen, da IE5.0 und Opera9.0 ebenfalls begann, sie zu unterstützen. Safari kann die Datei in .MHT (das Suffix der MHTML -Datei) speichern, unterstützt jedoch nicht das Anzeigen.
MHTML und Data URI sind ähnlich, leistungsfähigere Funktionen und komplexere Syntax und haben nicht die Nachteile, die in Data URI nicht wiederverwendet werden können, aber MHTML ist nicht flexibel und bequem genug zu verwenden. Beispielsweise kann die auf eine Ressource verwiesene URL eine relative Adresse in der MHT -Datei sein, ansonsten muss sie eine absolute Adresse sein. Hedgers Lösung für den IE in "Cross Browser Base64 codierte Bilder, die in HTML eingebettet sind" verwendet relative Pfade, da es Inhaltstyp: Message/RFC822 deklariert, um den IE nach MHTML zu erstellen. Wenn der Inhaltstyp nicht modifiziert ist, ist das MHTML-Protokoll erforderlich. Zu diesem Zeitpunkt müssen absolute Pfade verwendet werden, wie z. B. "MHTML -, wenn Sie Daten benötigen: URIS in IE7 und unter".
Anwendung Die Kombination von Daten URI und MHTML kann alle Mainstream -Browser vollständig lösen. Aufgrund der Mangel, zwischengespeichert und wiederverwendet zu werden, eignen sie sich nicht direkt für die Verwendung in Seiten. Sie haben jedoch große Vorteile bei der angemessenen Verwendung von Bildern in CSS- und JavaScript -Dateien:
- Die Anzahl der Anfragen wurde stark reduziert, und die CSS großer Websites verweisen nun auf eine große Anzahl von Bildressourcen.
- Sowohl CSS als auch JavaScript können zwischengespeichert werden, wodurch das Caching von Daten indirekt implementiert wird.
- Die Verwendung von CSS kann das Wiederverwendungsproblem von Data URI lösen
- Verabschieden Sie sich von CSS Sprites. Auch wenn es ein Merge -Tool gibt, muss es noch viel Zeit damit verbringen, effektiv Rätsel und Wartungsschwierigkeiten zu bringen. Nachdem Sie bestimmte Designprinzipien befolgt haben, können Sie CSS Sprites vollständig aufgeben, um CSS zu schreiben, und schließlich Tools zum Umwandeln von Bildern in Data URI und MHTML beim Hochladen auf den Server, wie beispielsweise die in Python implementierten Tools, die in "Verwenden von Data-URI-Merge-Stilblättern und Bildern implementiert sind", die viel Zeit speichern können.
- Base64 -Codierung erhöht die Bilddatei um 1/3, und die Verwendung von Data URI und MHTML gleichzeitig entspricht einer Zunahme von 2/3. CSS und JavaScript können jedoch die GZIP -Komprimierung verwenden, die 2/3 des Datenvolumens speichern kann. Daher ist das endgültige Datenvolumen nach der GZIP -Komprimierung (1 + 1/3) * 2 * (1/3) = 8/9, sodass der endgültige Verkehr reduziert wird.
Um die Implementierung von Data URI und MHTML in CSS zu erleichtern, habe ich einen Data URI & MHTML -Generator geschrieben, den Sie zum Generieren von Data URI & MHTML -Anwendungsinstanzen sehen können.
Bei der Verwendung von MHTML in CSS -Dateien muss die URL einen absoluten Pfad verwenden, was ihn sehr unflexibel macht. Daher können Sie in Betracht ziehen, den CSS -Ausdruck zum Lösen (Demo) zu verwenden, z. B.:
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-light-url-from-html/
*/
*Hintergrundbild: Ausdruck (Funktion (ele) {
ele.style.backgroundimage = 'url (MHTML:' +
document.getElementById ('data-uri-css'). getAttribute ('href', 4) +
'! 03114501408821761.gif)';
}(Das));
