Data URI und MHTML Komplettlösung für alle Browser

Daten-URI

Data URI ist ein durch RFC 2397 definiertes Schema zum direkten Einbetten kleiner Dateien in Dokumente. Um kleine Dateien in die angegebene Kodierung zu konvertieren und direkt in die Seite einzubetten, kann folgende Syntax verwendet werden:

Daten:[<MIME-Typ>][;base64],<Daten>

1. MIME-Typ: Gibt den MIME-Typ der eingebetteten Daten an. Sein Format ist [Typ]/[Untertyp]; Parameter. Beispielsweise lautet das MIME für PNG-Bilder image/png. Der Parameter „.txt“ kann verwendet werden, um zusätzliche Informationen anzugeben. Häufiger wird er verwendet, um den Zeichensatzparameter für die Textkodierung, wie z. B. „text/plain“ und „text/htm“, anzugeben. Der Standardwert ist „text/plain;charset=US-ASCII“.
2. base64: Gibt an, dass die folgenden Daten in Base64 codiert sind. Andernfalls müssen die Daten Prozent-codiert werden (d. h. der Inhalt muss per URL codiert werden).

Das Data-URI-Schema wurde im letzten Jahrhundert in HTML4.01 eingeführt. Bis heute wird es von allen gängigen Browsern außer IE6 und IE7 unterstützt. IE8 bietet jedoch immer noch nur eingeschränkte Unterstützung für Data-URI und unterstützt nur Objekte (nur für Bilder), Bilder, Eingabetyp=Bild, Links und URLs in CSS. Die Datengröße darf 32 KB nicht überschreiten.

Vorteil:

1. Reduzieren Sie die Anzahl der HTTP-Anfragen, eliminieren Sie den TCP-Verbindungsverbrauch und die Beschränkung der gleichzeitigen Anzahl von Browsern unter demselben Domänennamen.
2. Bei kleinen Dateien wird dadurch die Bandbreite reduziert. Obwohl die Datenmenge nach der Kodierung zunimmt, wird der HTTP-Header reduziert. Wenn die Datenmenge im HTTP-Header größer ist als die Zunahme bei der Dateikodierung, wird die Bandbreite reduziert.
3. Bei HTTPS-Sites treten beim Mischen von HTTPS und HTTP Sicherheitsabfragen auf. Außerdem weist HTTPS einen viel größeren Overhead als HTTP auf, sodass Data URI in dieser Hinsicht einen offensichtlicheren Vorteil bietet.
4. Die gesamte Multimediaseite kann als Datei gespeichert werden.

Manko :

1. Es kann nicht wiederverwendet werden. Wenn derselbe Inhalt mehrmals im selben Dokument verwendet wird, muss er mehrmals wiederholt werden, was die Datenmenge und die Downloadzeit erheblich erhöht.
2. Kann nicht unabhängig zwischengespeichert werden und wird daher neu geladen, wenn das enthaltene Dokument neu geladen wird.
3. Der Client muss erneut dekodieren und anzeigen, was den Verbrauch erhöht.
4. Datenkomprimierung wird nicht unterstützt. Base64-Kodierung erhöht die Größe um 1/3, und URL-kodierte Daten erhöhen die Größe noch mehr.
5. Es ist für die Filterung von Sicherheitssoftware nicht förderlich und birgt gewisse Sicherheitsrisiken.

MHTML

MHTML ist die Abkürzung für MIME HTML (Multipurpose Internet Mail Extension HTML), das in RFC 2557 als Lösung zum Speichern aller Inhalte einer Multimediaseite im selben Dokument definiert ist. Diese Lösung wurde von Microsoft vorgeschlagen und wird seit IE5.0 unterstützt, und auch Opera9.0 unterstützt sie nun. Safari kann Dateien im .mht-Format (MHTML-Dateierweiterung) speichern, unterstützt jedoch nicht die Anzeige.

MHTML ist Data URI sehr ähnlich, verfügt jedoch über leistungsfähigere Funktionen und eine komplexere Syntax und hat nicht den Nachteil der „Nichtwiederverwendbarkeit“ von Data URI. Allerdings ist MHTML nicht flexibel und bequem zu verwenden. Beispielsweise kann die URL für die Ressourcenreferenz in der MHT-Datei eine relative Adresse sein, andernfalls muss es eine absolute Adresse sein. Der Grund, warum Hedgers Lösung für IE in „Cross Browser Base64 Encoded Images Embedded in HTML“ relative Pfade verwendet, liegt darin, dass die Deklaration von Content-type:message/rfc822 IE dazu veranlasst, gemäß MHTML zu analysieren. Wenn der Content-type nicht geändert wird, muss das MHTML-Protokoll verwendet werden. Derzeit müssen absolute Pfade verwendet werden, z. B. „MHTML – wenn Sie Daten benötigen: URIs in IE7 und darunter“.

Anwendung

Die Kombination von Data URI und MHTML kann alle gängigen Browser vollständig lösen. Da sie nicht zwischengespeichert und wiederverwendet werden können, sind sie nicht für die direkte Verwendung in Webseiten geeignet, bieten jedoch große Vorteile, wenn sie entsprechend für Bilder in CSS- und JavaScript-Dateien verwendet werden:

1. Reduzieren Sie die Anzahl der Anfragen erheblich. Heutzutage verweist das CSS großer Websites auf eine große Anzahl von Bildressourcen.
2. Sowohl CSS als auch JavaScript können zwischengespeichert werden, wodurch indirekt eine Datenzwischenspeicherung implementiert wird.
3. Die Verwendung von CSS kann das Problem der Wiederverwendung von Daten-URIs lösen
4. Verabschieden Sie sich von CSS Sprites. CSS Sprites wurde entwickelt, um die Anzahl der Anfragen zu reduzieren. Allerdings verursachen CSS Sprites nicht nur Ausnahmen in unsicheren Situationen, sondern erfordern auch eine manuelle Bildzusammenführung. Selbst mit Zusammenführungstools müssen Sie immer noch viel Zeit damit verbringen, manuell herauszufinden, wie Sie das Puzzle effektiv zusammensetzen, was zu Wartungsschwierigkeiten führt. Wenn Sie bestimmte Designprinzipien befolgen, können Sie vollständig auf das Schreiben von CSS-Sprites mit CSS verzichten und schließlich Tools zum Konvertieren von Bildern in Daten-URI und MHTML verwenden, wenn Sie sie auf den Server hochladen, z. B. das in Python in „Verwenden von Daten-URI zum Zusammenführen von Stylesheets und Bildern“ implementierte Tool, was viel Zeit sparen kann.
5. Durch die Base64-Kodierung wird die Größe von Bilddateien um 1/3 erhöht, und die gemeinsame Verwendung von Data URI und MHTML entspricht einer Erhöhung um 2/3. CSS und JavaScript können jedoch mit gzip komprimiert werden, wodurch 2/3 der Daten eingespart werden können. Daher beträgt die endgültige Datengröße nach der gzip-Komprimierung (1 + 1/3) * 2 * (1/3) = 8/9, sodass der endgültige Datenverkehr reduziert wird.

Um die Implementierung von Data URI und MHTML in CSS zu erleichtern, habe ich einen Data URI- und MHTML-Generator geschrieben. Sie können sehen, wie Sie damit Data URI- und MHTML-Anwendungsbeispiele generieren können.

Wenn Sie MHTML in einer CSS-Datei verwenden, muss die URL einen absoluten Pfad verwenden, was sehr unflexibel ist. Sie können also erwägen, CSS-Ausdrücke zu verwenden, um dieses Problem zu lösen (DEMO), zum Beispiel:

/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*Hintergrundbild:Ausdruck(Funktion(Element){
ele.style.backgroundImage = 'url(mhtml:' +
document.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(Das));