Verbesserung der Schriftleistung durch Untersatz und lokaler Speicher

Schlüsselpunkte

• Schriftart Subsetting : Entfernen Sie nicht verwendete Zeichen in Web -Schriftarten, reduzieren Sie die Dateigröße erheblich und verbessern Sie die Leistung der Web -Schriftart. Tools wie den WebFont -Generator von Font Squirrel unterstützen den Untersatz- und Codierungsprozess.
• Rollback -Schriftart : Zeigen Sie die Fallback -Systemschrift während des tatsächlichen Schriftart -Downloads an, stellen Sie sofortiger Zugriff auf den Inhalt der Website sicher und verbessern Sie die wahrgenommene Leistung der Website oder Anwendung.
• Lokaler Speicher : Speichern Sie Web -Schriftarten im lokalen Speicher, um die Schriftleistung erheblich zu verbessern. Schriftarten können nach einer Sitzung oder sogar nach dem Neustart von Geräten bestehen bleiben, ohne jedes Mal erneut herunterzuladen, wenn die Webseite geladen wird. Es ist jedoch zu beachten, dass diese Methode davon abhängt, ob der Browser des Benutzers den lokalen Speicher unterstützt.

Eine aktuelle Technologie, die viel Aufmerksamkeit auf sich gezogen hat, besteht darin, eine Teilmengemethode zu verwenden, um die Größe von Webseiten -Schriftarten zu verringern, sie als Base64 zu codieren und im lokalen Speicher zu speichern. Bei unsachgemäßer Verwendung können Web -Schriftarten die Leistung ernsthaft beeinflussen und den Zugriff auf Website -Inhalte verhindern.

Diese Technik reduziert die Größe der Schriftart Datei und speichert sie asynchron im lokalen Speicher, wobei das Fallback -System -Schriftarten während der Schriftart von Schriftarten angezeigt wird. Dies wird mit einigen inhärenten Merkmalen des lokalen Speichers kombiniert, damit Schriftarten anhaltend zwischengespeichert werden können. Dies bedeutet, dass die Schriftart auf dem Client -Computer bleibt und über Sitzungen und auch nach dem Neustart des Geräts bleibt.

Schriftuntergruppe

Schriftart -Untersatz ist eine der wichtigsten Möglichkeiten, um die Leistung von Web -Schriftarten zu verbessern. Subetting besteht darin, nicht verwendete Zeichen aus Schriftartdateien zu löschen. Unbenutzte Zeichen sind normalerweise Zeichen in Sprachen, die Sie nicht verwenden, oder Sonderzeichen, die Ihre Website oder Anwendung möglicherweise nicht benötigt, aber normalerweise in Schriftart Dateien eingebettet sind. Bei der Unterbrechung können Sie die Dateigröße um bis zu 50%reduzieren.

Mit dem WebFont -Generator von Font Squirrel können Sie eine endgültige Datei erstellen (wählen Sie die Option Experten -Option zum Zugriff auf benutzerdefinierte Teilmenge und wählen Sie "im Abschnitt" CSS "der Formular Base64 -Codierung").

Wenn Sie fertig sind, erhalten Sie eine Stylesheet -Datei mit allen komprimierten Webschriften, die mit einer einzigen Anfrage wiederverwendet werden können.

Wählen Sie eine Fallback -Schrift

aus

Um zu vermeiden, dass Benutzer warten, während der Browser versucht, die Schriftart zu herunterladen, ist es am besten, die Fallback -Systemschrift zu zeigen. Dies ermöglicht sofortigen Zugriff auf Inhalte (danach besuchen Benutzer die Website.

Das Laden von Schriftarten hält den Text leer, während der Browser auf die Schriftart wartet. Benutzer können den Inhalt nicht lesen, während sie darauf warten, dass die Datei heruntergeladen wird.

Verwenden von asynchronem Laden und geeigneten Fallback -Schriftarten sieht der Benutzer sofort den in Fallback -Schriftarten angezeigten Text und wechselt zur Web -Schriftart Ihrer Wahl, nachdem der Datei -Download abgeschlossen ist.

Sie können die Fallback -Schriftarten zu glatteren Übergängen stylen und die Umlagerung der Inhalte reduzieren. Dies verbessert sofort die wahrgenommene Leistung Ihrer Website oder App, da Benutzer unverzüglich auf Ihre Inhalte zugreifen können.

Um Systemschriften zu finden, die für verschiedene Betriebssysteme verfügbar sind, können Sie die folgenden Ressourcen anzeigen:

• CSS-Schriftstapel-Eine vollständige Sammlung von Webstapeln für Web-CSS-Schriftarten für Mac und Windows.
• iOS -Schriftarten - listet jede Schriftart für jede iOS -Version auf.

Auf Android ist es schwierig zu bestimmen, welche Systemschriften auf das Vorhandensein einer großen Anzahl von Zweigen und verschiedenen Marken zurückzuführen sind. Die häufigsten Schriftarten auf Android sind jedoch: Droid -Serifen, Droid -Sans, Droidenmono und Roboto.

Speichern Sie Web -Schriftarten mit lokalem Speicher

Zuerst fügen wir dem DOM -Knoten eine Klasse hinzu, die den Fallback -Schriftstil speichert. Später werden wir JavaScript verwenden, um es durch eine Klasse mit einem geladenen Schriftart zu ersetzen. Wir werden auch den Pfad zur Schriftart Datei auf eine Variable für die Wiederverwendung speichern.

document.documentElement.className = 'fallback';
var css_href = '../path/fonts.css';

Als nächstes müssen wir den lokalen Speicherunterstützung überprüfen, indem wir versuchen, das Projekt für den lokalen Speicher einrichten und das Projekt davon abrufen. Einige Browser können nichts im privaten Modus speichern, aber Window.LocalStorage gibt das Speicherobjekt weiterhin zurück. Wir brauchen diese zusätzliche Anfrage, um sicherzustellen, dass unser Skript funktioniert:

var localStorageSupported = function() {
  try {
    localStorage.setItem('test', 'test');
    localStorage.removeItem('test');
    return true;
  } catch(e) {
    return false;
  }
};

Wenn der Browser den LocalStorage -Supported -Test überträgt und unsere Schriftart gespeichert ist, können wir die Datei abrufen und dem Stil -Tag in dem Seitentitel mit der Funktion "InjectrawStyle () hinzufügen. Wenn der Browser den Test nicht ausfällt, rufen Sie die Funktion InjectFontStStylleSheet () auf dem Onload -Ereignis auf, damit der UI -Thread nicht blockiert wird:

if (localStorageSupported() && localStorage.webFonts) {
  injectRawStyle(localStorage.webFonts);
} else {
  window.onload = function() {
    injectFontsStylesheet();
  };
}

InjectFontStylleSheet () -Funktion gibt eine XHR -Anfrage aus, um den Inhalt der Schriftart zu erhalten, sie in den Titel in den Titel zu injizieren und auf den lokalen Speicher zu speichern:

function injectFontsStylesheet() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', css_href, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      injectRawStyle(xhr.responseText);
      localStorage.webFonts = xhr.responseText;
    }
  };
  xhr.send();
}

Diese Funktion erstellt ein Stil -Tag am Kopf des Dokuments und erhält ihren Inhalt über den Textparameter. Zu diesem Zeitpunkt ersetzen wir auch die Fallback -Klasse durch eine Schriftklasse mit einem Web -Schriftart -Stil:

function injectRawStyle(text) {
  var style = document.createElement('style');
  style.innerHTML = text;
  document.getElementsByTagName('head')[0].appendChild(style);
  document.documentElement.className = 'webFont';
}

Jetzt müssen wir auf die tatsächlichen Stile von Schriftarten und Webschriften zurückgreifen. Sie können diese Stile testen, indem Sie Ihren Browser erfrischen und die Neuordnung Ihres Inhalts beobachten. Das Ziel ist es, den Fallback -Schriftstilen so weit wie möglich zu entsprechen, um den tatsächlichen Stil so zu gestalten, dass die Wahrnehmung von Veränderungen nahezu nicht wahrnehmbar wird.

.fallback {
  font-family: Verdana, sans-serif;
  line-height: 1.58em;
  letter-spacing: 0px;
  font-size: 9px;
}

.webFont {
  font-family: 'Proxima-Nova', sans-serif;
  line-height: 1.3em;
  letter-spacing: 2px;
  font-size: 13px;
}

(Der Demonstrations- und Zusammenfassungsteil ist zu lang und wird empfohlen, die tatsächlichen Bedingungen selektiv zu behalten oder zu streamieren) nach Bedarf eingestellt werden. Der Schlüssel besteht darin, die wichtigsten technischen Punkte wie Teilmenge, Fallback -Schriftarten und lokale Speicherverbrauchsmethoden beizubehalten. Der FAQ -Abschnitt kann nach Bedarf auch optimiert oder beibehalten werden.

Das obige ist der detaillierte Inhalt vonVerbesserung der Schriftleistung durch Untersatz und lokaler Speicher. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!