Amélioration des performances des polices avec sous-ensemble et stockage local

Points clés

• Sous-ensemble de police : supprimer les caractères inutilisés dans les polices Web, réduire considérablement la taille du fichier et améliorer les performances de la police Web. Des outils tels que le générateur Webfont de Font Squirrel aident le processus de sous-ensemble et d'encodage.
• FONT DE ROLLBACK : Affichez la police du système de secours lors du téléchargement réel de la police, en assurant un accès instantané au contenu du site Web et en améliorant les performances perçues du site Web ou de l'application.
• Stockage local : Enregistrez les polices Web dans le stockage local pour améliorer considérablement les performances des polices. Les polices peuvent persister après une session ou même le redémarrage de l'appareil sans avoir à redémarrer chaque fois que la page Web est chargée. Cependant, il convient de noter que cette méthode dépend du fait que le navigateur de l'utilisateur prend en charge le stockage local.

Une technologie récente qui a attiré beaucoup d'attention consiste à utiliser une méthode de sous-ensemble pour réduire la taille des polices de page Web, la coder en tant que base64 et la stocker dans le stockage local. S'ils sont utilisés mal, les polices Web peuvent sérieusement affecter les performances et peuvent empêcher l'accès au contenu du site Web.

Cette technique réduit la taille du fichier de police et la stocke de manière asynchrone dans le stockage local, affichant des polices de système de secours lors des téléchargements de police. Ceci est combiné avec certaines caractéristiques inhérentes du stockage local pour permettre de mettre en cache de manière persistante. Cela signifie que la police restera sur la machine client et restera entre les sessions et même après le redémarrage de l'appareil.

Sous-ensemble de police

Le sous-ensemble de polices est l'un des moyens les plus importants d'améliorer les performances des polices Web. Le sous-ensemble consiste à supprimer les caractères inutilisés des fichiers de police. Les caractères inutilisés sont généralement des caractères dans les langues que vous n'utilisez pas, ou des caractères spéciaux que votre site Web ou votre application peut ne pas nécessiter mais sont généralement intégrés dans des fichiers de police. Avec le sous-ensemble, vous pouvez réduire la taille du fichier jusqu'à 50%.

Vous pouvez utiliser le générateur Webfont de Font Squirrel pour sous-ensemble et encodage de base64 pour générer un fichier final (assurez-vous de sélectionner l'option d'experte pour accéder aux sous-ensembles personnalisés et sélectionner "dans la section" CSS "du formulaire Base64 Encoding").

Une fois terminé, vous obtiendrez un fichier de feuille de style avec toutes les polices Web compressées qui peuvent être réutilisées avec une seule demande.

Sélectionnez une police de secours

Pour éviter d'attendre les utilisateurs pendant que le navigateur essaie de télécharger le fichier de police, il est préférable d'afficher la police du système de secours. Cela permet un accès immédiat au contenu (après tout, c'est pour cela que les utilisateurs visitent le site Web).

Le chargement des polices simultanément gardera le texte vide pendant que le navigateur attend le fichier de police, et les utilisateurs ne pourront pas lire le contenu en attendant que le fichier soit téléchargé.

En utilisant le chargement asynchrone et les polices de secours appropriées, l'utilisateur verra immédiatement le texte affiché dans les polices de secours et passera à la police Web de votre choix une fois le téléchargement de fichier terminé.

Vous pouvez styliser les polices de secours à des transitions plus lisses et réduire le réarrangement du contenu. Cela améliore immédiatement les performances perçues de votre site Web ou de votre application car les utilisateurs peuvent accéder à votre contenu sans délai.

Pour trouver des polices système disponibles pour différents systèmes d'exploitation, vous pouvez afficher les ressources suivantes:

• Pile de police CSS - Une collection complète de piles de polices CSS sécurisées sur le Web pour Mac et Windows.
• Fonts iOS - répertorie chaque police pour chaque version iOS.

Sur Android, il est difficile de déterminer quelles polices de système sont dues à la présence d'un grand nombre de branches et de différentes marques. Cependant, les polices les plus courantes sur Android sont: Droid Serif, Droid Sans, Droid Mono et Roboto.

Enregistrer les polices Web à l'aide du stockage local

Tout d'abord, nous ajoutons une classe au nœud Dom qui sauvera le style de police de secours. Plus tard, nous utiliserons JavaScript pour le remplacer par une classe par un style de police chargé. Nous enregistrerons également le chemin du fichier de police vers une variable de réutilisation ultérieurement.

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

Ensuite, nous devons vérifier le support de stockage local en essayant de configurer le projet vers le stockage local et en tirer le projet. Certains navigateurs ne peuvent rien stocker en mode privé, mais Window.Localstorage renverra toujours l'objet de stockage. Nous avons besoin de cette demande supplémentaire pour nous assurer que notre script fonctionne:

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

Si le navigateur réussit le test localstorages supportés et que notre fichier de police est stocké, nous pouvons obtenir le fichier et l'ajouter à la balise de style à l'intérieur du titre de la page à l'aide de la fonction injecrowstyle (). Si le navigateur échoue au test, appelez la fonction InjectFontStyLesHeet () sur l'événement Onload afin que le thread d'interface utilisateur ne soit pas bloqué:

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

InjectFontStyLesHeet () Fonction Présence Une demande XHR pour obtenir le contenu du fichier de police, l'injecter dans le titre avec la fonction injacre et l'enregistrer dans le stockage local:

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();
}

Cette fonction crée une balise de style à la tête du document et obtient son contenu via le paramètre de texte. À ce stade, nous remplaçons également la classe de secours par une classe de police par un style de police Web:

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

Maintenant, nous devons nous rabattre sur les styles réels des polices et des polices Web. Vous pouvez tester ces styles en rafraîchissant votre navigateur et en observant le réarrangement de votre contenu. L'objectif est de correspondre autant que possible aux styles de police de secours pour faire le style réel afin que la perception du changement devienne presque imperceptible.

.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;
}

(la partie de démonstration et de résumé est trop longue, et il est recommandé de conserver ou de rationaliser sélectivement les conditions réelles) Cette partie contient principalement des liens de démonstration de codepen et un résumé du contenu précédent, qui peut être ajusté au besoin. La clé est de conserver des points techniques de base, tels que le sous-ensemble, les polices de secours et les méthodes d'utilisation locale de stockage. La section FAQ peut également être rationalisée ou conservée au besoin.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!