Website von YanKaven : http://dancewithnet.com/
Daten-URI
Daten-URI ist ein in RFC 2397 definiertes Schema zum direkten Einbetten kleiner Dateien in Dokumente. Mit der folgenden Syntax können Sie eine kleine Datei in eine bestimmte Kodierung konvertieren und direkt in die Seite einbetten:
Daten:[<MIME-Typ>][;base64],<Daten>
- MIME-Typ: Gibt den MIME der eingebetteten Daten an. Seine Form ist [Typ]/[Subtyp]; der MIME, der einem PNG-Bild entspricht, ist beispielsweise image/png. Der Parameter kann zur Angabe zusätzlicher Informationen verwendet werden. In einigen Fällen handelt es sich um den Zeichensatzparameter, der zur Angabe von Textkodierungsmethoden wie text/plain und text/htm verwendet wird. Der Standardwert ist text/plain;charset=US-ASCII.
- base64: Die Codierung der Daten nach der Anweisung ist base64 , andernfalls müssen die Daten prozentual codiert sein (d. h. den Inhalt urlencodieren).
Mit HTML 4.01 wurde das Daten-URI-Schema im letzten Jahrhundert eingeführt . Bislang wird es von allen Mainstream-Browsern unterstützt . Allerdings gibt es bei IE8 immer noch Einschränkungen bei der Unterstützung von Daten-URIs . img, Eingabetyp=Bild, Link und URL in CSS, und die Datengröße darf nicht größer als 32 KB sein.
Vorteil:
- Reduzieren Sie die Anzahl der HTTP-Anfragen . Unter demselben Domänennamen gibt es keine TCP-Verbindungsverbrauchs- und Browser-Parallelitätsbeschränkung.
- Bei kleinen Dateien wird die Bandbreite reduziert. Obwohl die Datenmenge nach der Codierung zunimmt, wird der HTTP-Header reduziert. Wenn die Datenmenge im HTTP-Header größer ist als die Dateicodierung, wird die Bandbreite reduziert.
- Bei HTTPS-Sites gibt es Sicherheitsabfragen, wenn HTTPS und HTTP gemischt werden, und HTTPS ist teurer als HTTP, sodass Data URI in dieser Hinsicht offensichtlichere Vorteile bietet.
- Die gesamte Multimediaseite kann als Datei gespeichert werden.
Mangel :
- Wenn derselbe Inhalt mehrmals auf dasselbe Dokument angewendet wird, muss er mehrmals wiederholt werden, was die Datenmenge erheblich erhöht und die Downloadzeit verlängert.
- Es kann nicht einzeln zwischengespeichert werden und muss daher neu geladen werden, wenn das enthaltende Dokument neu geladen wird.
- Der Client muss neu dekodieren und anzeigen, was den Punktverbrauch erhöht.
- Die Datenkomprimierung wird nicht unterstützt, die Base64-Kodierung erhöht die Größe um 1/3 und das Datenvolumen erhöht sich nach der URL-Kodierung noch mehr.
- Es ist nicht förderlich für die Filterung von Sicherheitssoftware und es bestehen auch gewisse Sicherheitsrisiken.
MHTML
MHTML ist die Abkürzung für MIME HTML (Multipurpose Internet Mail Extension HTML) . Es handelt sich um eine durch RFC 2557 definierte Lösung zum Speichern aller Inhalte einer Multimediaseite im selben Dokument. Diese Lösung wurde von Microsoft zur Unterstützung ab IE5.0 vorgeschlagen, und Opera9.0 unterstützt sie ebenfalls. Safari kann die Datei im .mht-Format (MHTML-Dateisuffix) speichern, unterstützt jedoch nicht die Anzeige.
MHTML ist dem Daten-URI relativ ähnlich, verfügt jedoch über leistungsfähigere Funktionen und eine komplexere Syntax und weist nicht den Nachteil auf, dass er in Daten-URI nicht wiederverwendet werden kann. Allerdings ist MHTML nicht flexibel und bequem zu verwenden Eine Ressourcenreferenz in der MHT-Datei kann eine relative Adresse sein, andernfalls muss es eine absolute Adresse sein. Hedgers Lösung für IE in „Cross Browser Base64 Encoded Images Embedded in HTML“ verwendet einen relativen Pfad, da Content-type: message/rfc822 deklariert ist, sodass IE ihn gemäß MHTML analysiert. Wenn Sie den Content-type nicht ändern, benötigen Sie Um das MHTML-Protokoll zu verwenden, müssen zu diesem Zeitpunkt absolute Pfade verwendet werden, z. B. „MHTML – wenn Sie Daten benötigen: URIs in IE7 und darunter“ .
Anwendung
Die Kombination von Daten-URI und MHTML kann das Problem aller Mainstream-Browser vollständig lösen. Da sie nicht zwischengespeichert und wiederverwendet werden können, sind sie nicht für die direkte Verwendung auf der Seite geeignet, können jedoch entsprechend für Bilder in CSS- und JavaScript-Dateien verwendet werden. Die Verwendung bietet große Vorteile:
- Die Anzahl der Anfragen wird jetzt stark reduziert. Das CSS großer Websites verweist auf eine große Anzahl von Bildressourcen.
- Sowohl CSS als auch JavaScript können zwischengespeichert werden, wodurch indirekt das Daten-Caching implementiert wird.
- Die Verwendung von CSS kann das Problem der Wiederverwendung von Daten-URIs lösen
- Verabschieden Sie sich von CSS-Sprites . CSS-Sprites führen jedoch nicht nur zu Ausnahmen unter unsicheren Umständen , sondern erfordern auch eine künstliche Zusammenführung von Bildern Künstlich wirksame Rätsel nehmen viel Zeit in Anspruch und erschweren die Wartung. Wenn Sie bestimmte Designprinzipien befolgen, können Sie CSS Sprites vollständig aufgeben, um CSS zu schreiben, und schließlich Tools zum Konvertieren von Bildern in Daten-URI und MHTML beim Hochladen auf den Server verwenden, z. B. „Verwenden von Daten-URI zum Zusammenführen von Stylesheets und Bildern“. In Python implementierte Tools können viel Zeit sparen.
- Die Base64-Kodierung erhöht die Bilddatei um 1/3. Die gleichzeitige Verwendung von Daten-URI und MHTML entspricht einer Steigerung von 2/3. CSS und JavaScript können jedoch die GZIP-Komprimierung verwenden, wodurch 2/3 des Datenvolumens eingespart werden kann , also mit gzip-Komprimierung Die endgültige Datenmenge beträgt (1 + 1/3) * 2 * (1/3) = 8/9, sodass der endgültige Datenverkehr reduziert wird.
Um die Implementierung von Daten-URI und MHTML in CSS zu erleichtern, habe ich einen Daten-URI- und MHTML-Generator geschrieben. Sie können sich das Anwendungsbeispiel für die Verwendung zum Generieren von Daten-URI und MHTML ansehen.
Wenn Sie MHTML in einer CSS-Datei verwenden, muss die URL einen absoluten Pfad verwenden, was sehr unflexibel ist. Sie können daher die Verwendung eines CSS-Ausdrucks in Betracht ziehen, um das Problem zu lösen ( DEMO ), wie zum Beispiel:
/*
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) +
'!03114501408821761.gif)';
}(Das));
Originaltext: http://dancewithnet.com/2009/08/15/data-uri-mhtml/
