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

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!