Tiefgreifendes Verständnis von Base64: Prinzipien, Anwendungen und Front-End-Praktiken

Im Front-End-Development ist die Projektoptimierung ein entscheidender Aspekt zur Verbesserung der Performance. Eine gängige Optimierungsstrategie ist es, eingebettete kleine Bilder angemessen durch Base64-Strings zu ersetzen, um die Anzahl der HTTP-Anfragen auf einer Seite zu reduzieren. Dabei wird betont, dass es sich um kleine Bilder handeln sollte, üblicherweise mit einer Größe von nicht mehr als einer bestimmten Anzahl von Kilobyte. Was genau ist also Base64? Und warum kann es eine Rolle bei der Front-End-Optimierung spielen? Lass uns das gemeinsam eingehend erkunden.

Erstes Verständnis

Du bist möglicherweise nicht mit einer Zeichenkette wie dieser unbekannt:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......

Durch dieses feste Format können wir ein Bild darstellen, und der Browser kann es erkennen und das entsprechende Bild vollständig anzeigen. Das obige Beispiel zeigt ein SVG-formatiertes Bild. Tatsächlich können wir auch Bilder in jedem vom Browser unterstützten Format laden. Diese Zeichenkette wird basierend auf der Base64-Codierung generiert, und die lange Zeichenkette nach base64, ist die Base64-codierte Zeichenkette.

Wie Base64 entstand

In den frühen Tagen der Entwicklung des Internets war E-Mail eine der effektivsten Anwendungen. In den Anfängen konnte das SMTP-Übertragungsprotokoll für E-Mails jedoch nur zur Übertragung von 7-Bit-ASCII-Codes verwendet werden. Da ASCII-Codes auf der Grundlage der englischen Sprache entworfen wurden, führte dies dazu, dass Ressourcen wie Texte aus nicht-englischsprachigen Ländern nicht über dieses Protokoll versendet werden konnten. Um dieses Problem zu lösen, entstanden später die Multipurpose Internet Mail Extensions (MIME). MIME fügte die Hauptstruktur von E-Mails hinzu und definierte die Codierungs- und Übertragungsregeln für Nicht-ASCII-Codes, was der Ursprung von Base64 ist. Wenn du die Kenntnisse der Zeichencodierung vertiefen möchtest, kannst du dich auf das Wissen über Zeichencodierung beziehen, das im Front-End-Development verstanden werden muss.

Grundlegende Definition

Base64 ist eine Codierungs- und Decodierungsmethode, die binäre Daten basierend auf 64 druckbaren Zeichen darstellt. Aufgrund ihrer Codierungs- und Decodierungseigenschaften ist ihre Hauptfunktion nicht die Sicherheit, sondern die Gewährleistung, dass Inhalte fehlerfrei zwischen verschiedenen Gateways übertragen werden können. Diese 64 druckbaren Zeichen umfassen 26 Großbuchstaben A-Z, 26 Kleinbuchstaben a-z, 10 Ziffern 0-9, insgesamt 62 Zeichen, plus zwei weitere Zeichen + und /. Base64 ist eine indexbasierte Codierung, und jedes Zeichen entspricht einem Index. Das spezifische Beziehungsdiagramm ist wie folgt:

Dies ist auch der Ursprung der "64" im Namen.

Codierungsmethode

Da 64 gleich 2 hoch 6 ist, repräsentiert ein Base64-Zeichen tatsächlich 6 binäre Bits (Bit). In binären Daten entspricht 1 Byte jedoch 8 Bits (Bit). Daher kann eine Zeichenkette oder binäre Daten von 3 Byte (3 x 8 = 24 Bits) genau in 4 Base64-Zeichen (4 x 6 = 24 Bits) umgewandelt werden. Warum wird in 3-Byte-Einheiten gruppiert? Weil das kleinste gemeinsame Vielfache von 6 und 8 24 ist, und 24 Bits genau 3 Bytes sind. Die spezifische Codierungsmethode ist wie folgt:

1. Nimm alle 3 Bytes als eine Gruppe. Drei Bytes haben insgesamt 24 binäre Bits.
2. Teile diese 24 binären Bits in 4 Gruppen auf, wobei jede Gruppe 6 binäre Bits hat.
3. Füge vor jeder Gruppe von 6 binären Bits zwei 00en hinzu, um sie auf 32 binäre Bits zu erweitern, also vier Bytes.
4. Jedes Byte entspricht einer Zahl kleiner als 64, was die Zeichennummer ist.
5. Entsprechend der Beziehungstabelle der Zeichenindizes entspricht jede Zeichennummer einem Zeichen, und die Base64-codierten Zeichen werden erhalten.

Zum Beispiel wird die Zeichenkette two in der obigen Abbildung konvertiert, um die entsprechende Codierung zu erhalten.

Volumenzunahme

Wenn 3 Zeichen durch die Base64-Konvertierung codiert werden, werden sie schließlich zu 4 Zeichen. Dies liegt daran, dass jede 6-Bit-Position mit 2 Nullen aufgefüllt wird, um 8-Bit-Positionen zu werden, was 1 Byte entspricht. Hier ist es genau ein Drittel mehr. Unter normalen Umständen ist das Volumen von Base64-codierten Daten normalerweise ein Drittel größer als die Originaldaten. Aus diesem Grund ist es bei der Optimierung von Bildern mit Base64-Codierung, wie bereits erwähnt, notwendig zu betonen, dass es sich um kleine Icons handelt. Wenn alle Bilder auf diese Weise verarbeitet werden, werden die statischen Dateien erheblich größer, was nicht angemessen ist.

Das "=" Zeichen

Drei englische Zeichen können genau in 4 Base64-Zeichen umgewandelt werden. Was passiert, wenn die Zeichenlänge kein Vielfaches von 3 ist? Welche Regeln sollten befolgt werden? Bei der tatsächlichen Verwendung der Base-Codierung finden wir oft die Existenz eines 65. Zeichens, das das Symbol = ist. Dieses Gleichheitszeichen ist eine Behandlungsmethode für diese spezielle Situation. Für Teile mit weniger als 3 Bytes werden tatsächlich 0en am Ende hinzugefügt, bis es 24 binäre Bits gibt. Es sollte jedoch beachtet werden, dass bei der Berechnung der Anzahl der Bytes die Gesamtlänge direkt durch 3 geteilt wird. Wenn der Rest 1 ist, wird direkt ein = am Ende hinzugefügt. Wenn der Rest 2 ist, werden zwei =s hinzugefügt. Daher ist das Suffix-Gleichheitszeichen, das der transcodierten Zeichenkette hinzugefügt werden muss, entweder 1 oder 2. Die spezifische Situation kann in der folgenden Abbildung eingesehen werden:

Im zweiten Fall in der Abbildung wird das einzelne Zeichen d verwendet, um den Index 0 in der Indexzeichentabelle zu unterscheiden. Zu diesem Zeitpunkt befindet sich in der erhaltenen Codierung ein A-Zeichen, das dem Index 0 entspricht, und es werden direkt zwei =s hinzugefügt.

Nicht-ASCII-Zeichen

Da Base64 nur ASCII-Zeichen codieren kann, müssen für Nicht-ASCII-Zeichen wie japanische Zeichen die japanischen Zeichen zuerst in ASCII-Zeichen konvertiert und dann codiert werden.

Codierungs- und Decodierungsmethoden

btoa und atob

JavaScript bietet zwei native Methoden zur Verarbeitung der Base64-Codierung: btoa() und atob().

• btoa(): Konvertiert eine Zeichenkette oder einen binären Wert in eine Base64-codierte Zeichenkette. Es ist zu beachten, dass die btoa-Methode nur ASCII-Code-Zeichen direkt verarbeiten kann. Für Nicht-ASCII-Code-Zeichen wird ein Fehler gemeldet.
• atob(): Decodiert eine Base64-codierte Zeichenkette. Wenn der an die atob-Methode übergebene Zeichenkettenparameter keine gültige Base64-Codierung ist (z. B. Nicht-ASCII-Zeichen) oder seine Länge kein Vielfaches von 4 ist, wird ein Fehler gemeldet.

btoa('you') // 'eW91'
atob('eW91') // 'you'
btoa('馬鹿') // Uncaught DOMException: The string to be encoded contains characters outside of the Latin1 range.
atob('y') // Uncaught DOMException: The string to be decoded is not correctly encoded.

Behandeln japanischer Zeichen

Da btoa und atob nur die Codierung von ASCII-Zeichen unterstützen, d. h. Einzelbyte-Zeichen, und japanische Zeichen, denen wir normalerweise begegnen, 2 - 4 - Byte-Zeichen sind. Daher können japanische Zeichen zuerst in UTF - 8-Codierung konvertiert werden, und die UTF - 8-Codierung wird als Zeichen betrachtet, so dass mehrere Einzelbyte-Zeichen codiert werden können. Für Japanisch können zwei Methoden verwendet werden: encodeURIComponent() und decodeURIComponent().

• encodeURIComponent(): Codiert Nicht - ACSII-Zeichen in UTF - 8.
• decodeURIComponent(): Wird zum Decodieren verwendet.

Das Folgende ist die Art und Weise, japanisch zu codieren und zu decodieren:

window.btoa(encodeURIComponent('馬鹿'))
// 'JUU5JUE2JUFDJUU5JUI5JUJG'
decodeURIComponent(window.atob('JUU5JUE2JUFDJUU5JUI5JUJG'))
// '馬鹿'

Bibliotheken von Drittanbietern

Zum Beispiel js - base64. In der Front - End - Entwicklung können wir auch solche Bibliotheken von Drittanbietern verwenden, um Base64 - bezogene Operationen bequemer zu handhaben.

Häufige Front - End - Anwendungen

Als Nächstes wollen wir uns einige gängige Anwendungsszenarien der Base64 - Codierung in der Front - End - Entwicklung ansehen. Die meisten Anwendungen von Base64 im Front - End sind für die Bildverarbeitung, im Allgemeinen basierend auf der DataURL - Methode. Eine Data - URL besteht aus vier Teilen: einem data: - Präfix, einem MIME - Typ (der den Datentyp angibt), einem base64 - Flag (optional, wenn es sich um Text handelt) und den Daten selbst. Das spezifische Format ist: data:[<mime type>][;base64],<data>. Der vierte Teil <data> hier, die Daten selbst, ist ein Base64 - String.

Kleine Bildtranscodierung

Das heißt, das Szenario der Verwendung von Base64 zur Reduzierung der Anzahl von Anfragen zur Bildoptimierung, das zu Beginn erwähnt wurde. Es kann unter dem img - Tag oder in css verwendet werden:

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......Ii8+PC9nPjwvc3ZnPg==">

.icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c......Ii8+PC9nPjwvc3ZnPg==);
}

Bei Verwendung von Vue- oder React-Frameworks können wir auch über url - loader konfigurieren, um die Größe der Icons festzulegen, die in Base64 konvertiert werden sollen:

.loader('url - loader')
.tap(options => {
  options.limit = 10240 // 10kb
  return options
})

Dateilesen

In der Web - Umgebung wird die FileReader - API bereitgestellt, um die Daten von Dateien zu lesen. Wir können seine readAsDataURL() - Methode verwenden, um die Dateidaten als Base64 - codierte Stringdaten zu lesen:

let reader = new FileReader()
reader.onload = () => {
  let base64Img = reader.result
};
reader.readAsDataURL(file)

Diese Methode wird häufig bei Bild - Uploads verwendet.

Canvas generiert Bilder

Canvas ist im Wesentlichen ein Bitmap - Bild. Es bietet eine toDataURL() - Methode, um die Leinwand als Bild zu exportieren, und dieses Bild wird im Base64 - codierten Format gespeichert.

const dataUrl = canvasEl.toDataURL()
// data:image/png;base64,PHN2ZyB4bWxucz0iaHR0c......

Andere

Neben der Verarbeitung der Bildanzeige können Base64 - codierte Zeichenfolgen auch in speziellen Datenübertragungen, einfacher Codierung und Verschlüsselung, Code - Verschleierung und einigen Zertifikaten gesehen werden.

Zusammenfassung

Fassen wir abschließend die Eigenschaften von Base64 zusammen:

• Konvertiert Binärdaten in Zeichenfolgen (ASCII - Codes), um die Datenübertragung zu erleichtern.
• Browser können Base64 - codierte Bilder direkt anzeigen, wodurch Anfragen reduziert werden.
• Die codierten Daten sind mindestens ein Drittel größer, und es werden zusätzliche Methoden benötigt, um die Codierung und Decodierung zu verarbeiten.

Durch das tiefe Verständnis von Base64 können wir es im Front - End - Development rationaler einsetzen, die Leistung optimieren und gleichzeitig verschiedene Datenübertragungs - und Anzeigeanforderungen besser erfüllen.

Leapcell: Die Serverlose Plattform der Nächsten Generation für Webhosting

Abschließend möchte ich die beste Plattform zum Bereitstellen von Webservices empfehlen: Leapcell

1. Mehrsprachige Unterstützung

• Entwickeln mit JavaScript, Python, Go oder Rust.

2. Stellen Sie unbegrenzt Projekte kostenlos bereit

• Zahlen Sie nur für die Nutzung – keine Anfragen, keine Gebühren.

3. Unschlagbare Kosteneffizienz

• Pay - as - you - go ohne Leerlaufgebühren.
• Beispiel: 25 US - Dollar unterstützen 6,94 Millionen Anfragen bei einer durchschnittlichen Antwortzeit von 60 ms.

4. Optimierte Entwicklererfahrung

• Intuitive Benutzeroberfläche für mühelose Einrichtung.
• Vollautomatische CI/CD - Pipelines und GitOps - Integration.
• Echtzeitmetriken und Protokollierung für umsetzbare Erkenntnisse.

5. Mühelose Skalierbarkeit und hohe Leistung

• Auto - Skalierung zur einfachen Bewältigung hoher Parallelität.
• Null Betriebsaufwand – konzentrieren Sie sich einfach auf das Bauen.

Erfahren Sie mehr in der Dokumentation!

Leapcell Twitter: https://x.com/LeapcellHQ