Daten-URI und MHTML lösen vollständig die Erstellung aller Browser_HTML/Xhtml_Webseiten

Daten-URI

Daten-URI ist ein durch 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:[][;base64],

1. 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.
2. base64: Die Kodierung der Daten nach der Anweisung ist base64, andernfalls müssen die Daten prozentual kodiert sein (d. h. den Inhalt urlenkodieren).

Im letzten JahrhundertHTML4.01 führte das Daten-URI-Schema einAb heuteaußer IE6 und IE7 unterstützen alle wichtigen Browser, aber IE8 Die Unterstützung für Der Daten-URI ist immer noch begrenzt . Er unterstützt nur Objekt (nur für Bilder), IMG, Eingabetyp=Bild, Link und URL und die Datengröße darf nicht größer als 32 KB sein.

Vorteile:

1. Reduzieren Sie die Anzahl der HTTP-Anfragen, es gibt keinen TCP-Verbindungsverbrauch und die Anzahl gleichzeitiger Browser unter demselben Domänennamen ist begrenzt.
2. 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.
3. Bei HTTPS-Sites gibt es Sicherheitsabfragen, wenn HTTPS und HTTP zusammen verwendet werden, und HTTPS ist teurer als HTTP, sodass der Vorteil von Daten-URI in dieser Hinsicht offensichtlicher ist.
4. Sie können die gesamte Multimediaseite als Datei speichern.

Nachteile:

1. Kann nicht wiederverwendet werden. Wenn derselbe Inhalt mehrmals auf dasselbe Dokument angewendet wird, muss er mehrmals wiederholt werden, was die Datenmenge erhöht und die Downloadzeit verlängert.
2. kann nicht einzeln zwischengespeichert werden, daher wird es neu geladen, wenn das enthaltende Dokument neu geladen wird.
3. Der Client muss neu dekodieren und anzeigen, was den Punktverbrauch erhöht.
4. 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.
5. 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), 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. Es verfügt über leistungsfähigere Funktionen und eine komplexere Syntax und weist nicht den Nachteil auf, dass es in Daten-URI nicht wiederverwendet werden kann die URL von Ressourcenreferenzen. Es kann eine relative Adresse in der MHT-Datei sein, andernfalls muss es eine absolute Adresse sein. Hedgers 《Cross Browser Base64 Encoded Images Embedded in HTML》Die Lösung für IE verwendet einen relativen Pfad, da Content-type: message/rfc822 deklariert ist, damit IE ihn gemäß MHTML analysiert, wenn der Inhalt nicht vorhanden ist Modified -type erfordert die Verwendung des MHTML-Protokolls. In diesem Fall muss der absolute Pfad verwendet werden, wie zum Beispiel 《MHTML – wenn Sie Daten benötigen: URIs in IE7 und darunter》.

Bewerben

Die Kombination von Daten-URI und MHTML kann das Problem aller gängigen Browser vollständig lösen. Da sie nicht zwischengespeichert und wiederverwendet werden können, eignen sie sich nicht für die direkte Verwendung in Seiten, wohl aber für die Verwendung in CSS- und JavaScript-Dateien. Der richtige Einsatz von Bildern hat große Vorteile:

1. Reduzieren Sie die Anzahl der Anfragen erheblich. Das CSS großer Websites bezieht sich jetzt auf eine große Anzahl von Bildressourcen.
2. Sowohl CSS als auch JavaScript können zwischengespeichert werden, wodurch indirekt das Daten-Caching realisiert wird.
3. Die Verwendung von CSS kann das Problem der Wiederverwendung von Daten-URIs lösen
4. LebewohlCSS-Sprites, CSS-Sprites scheinen die Anzahl der Anfragen zu reduzieren, aber zusätzlich zu Ausnahmen in unsicheren Situationen erfordern CSS-Sprites auch die Zusammenführung künstlicher Bilder, selbst wenn diese vorhanden sind Da es sich um ein Zusammenführungstool handelt, erfordert es immer noch viel Zeit, effektiv zu rätseln, und bringt Wartungsschwierigkeiten mit sich. 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.“ Das in Python implementierte Tool im Bild „ kann viel Zeit sparen.
5. Base64-Kodierung erhöht die Bilddatei um 1/3. Die gleichzeitige Verwendung von Daten-URI und MHTML entspricht einer Steigerung von 2/3, aber CSS und JavaScript können die GZIP-Komprimierung verwenden, wodurch 2/3 eingespart werden kann Datenvolumen, also verwenden Sie Das endgültige Datenvolumen nach der GZIP-Komprimierung 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 generierte Daten-URI- und MHTML-Anwendungsbeispiel ansehen.

Bei der Verwendung von MHTML in einer CSS-Datei 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)