サブセットとローカルストレージでのフォントパフォーマンスの向上-jsチュートリアル-php.cn

Improving Font Performance with Subsetting and Local Storage

キーポイント

フォントサブセット：Webフォントで未使用の文字を削除し、ファイルサイズを大幅に削減し、Webフォントのパフォーマンスを向上させます。 Font SirrelのWebFontジェネレーターなどのツールは、サブセットおよびエンコーディングプロセスを支援します。
ロールバックフォント：実際のフォントダウンロード中にフォールバックシステムフォントを表示し、ウェブサイトのコンテンツに即座にアクセスし、ウェブサイトまたはアプリケーションの知覚されたパフォーマンスを改善します。
ローカルストレージ：ローカルストレージにWebフォントを保存して、フォントのパフォーマンスを大幅に向上させます。ウェブページがロードされるたびに再ダウンロードすることなく、セッションまたはデバイスの再起動後にフォントが持続できます。ただし、この方法は、ユーザーのブラウザがローカルストレージをサポートするかどうかに依存することに注意する必要があります。

多くの注目を集めている最近のテクノロジーは、サブセット方法を使用してWebページフォントのサイズを削減し、Base64としてエンコードし、ローカルストレージに保存することです。不適切に使用すると、Webフォントはパフォーマンスに深刻な影響を与える可能性があり、Webサイトのコンテンツへのアクセスを防ぐことができます。

この手法により、フォントファイルのサイズが縮小され、ローカルストレージに非同期に保存され、フォントのダウンロード中にフォールバックシステムフォントが表示されます。これは、ローカルストレージのいくつかの固有の機能と組み合わされて、フォントを永続的にキャッシュできるようにします。これは、フォントがクライアントマシンに残り、デバイスの再起動後であっても、セッション全体にとどまることを意味します。

フォントサブセット

フォントサブセットは、Webフォントのパフォーマンスを改善する最も重要な方法の1つです。サブセットは、フォントファイルから未使用の文字を削除することです。未使用の文字は通常、使用しない言語の文字、またはあなたのウェブサイトやアプリケーションが必要としないかもしれない特殊文字の文字ですが、通常はフォントファイルに埋め込まれています。サブセットを使用すると、ファイルサイズを最大50％削減できます。

フォントリスのWebFontジェネレーターを使用してサブセットとBase64エンコードを使用して最終ファイルを生成できます（Form Subsettingにアクセスするには、Base64エンコードの「CSS」セクションで「CSS」セクションで「CSS」セクションを選択してください）。

終了すると、1つのリクエストで再利用できるすべての圧縮Webフォントを備えたStyleSheetファイルが表示されます。

フォールバックフォントを選択を選択します

ブラウザがフォントファイルをダウンロードしようとしている間に待機しているユーザーを避けるために、フォールバックシステムフォントを表示するのが最善です。これにより、コンテンツへの即時アクセスが可能になります（結局のところ、それがユーザーがウェブサイトにアクセスするものです）。

フォントを同時にロードすると、ブラウザがフォントファイルを待機している間にテキストを空白に保ち、ユーザーはファイルをダウンロードするのを待っている間にコンテンツを読み取ることができません。

非同期ロードと適切なフォールバックフォントを使用して、ユーザーはすぐにファイルのダウンロードが完了した後、フォールバックフォントに表示されたテキストをすぐに表示し、選択したWebフォントに切り替えます。

フォールバックフォントをより滑らかな遷移にスタイリングし、コンテンツの再配置を減らすことができます。これにより、ユーザーは遅滞なくコンテンツにアクセスできるため、Webサイトまたはアプリの知覚されたパフォーマンスがすぐに向上します。

さまざまなオペレーティングシステムで利用可能なシステムフォントを見つけるには、次のリソースを表示できます。

ローカルストレージを使用してWebフォントを保存します

最初に、フォールバックフォントスタイルを保存するクラスをDOMノードに追加します。その後、JavaScriptを使用して、ロードされたフォントスタイルのクラスに置き換えます。また、後で再利用するために、フォントファイルへのパスを変数に保存します。

次に、プロジェクトをローカルストレージにセットアップし、プロジェクトを入手しようとすることにより、ローカルストレージサポートを確認する必要があります。一部のブラウザはプライベートモードで何も保存できませんが、window.localStorageは引き続きストレージオブジェクトを返します。スクリプトが機能することを確認するために、この追加のリクエストが必要です。

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

ログイン後にコピー

ブラウザがLocalStoragesupportedテストを渡し、フォントファイルが保存されている場合、InjectRawStyle（）関数を使用してファイルを取得してページタイトル内のスタイルタグに追加できます。ブラウザがテストに失敗した場合は、UIスレッドがブロックされないように、オンロードイベントでInjectFontSstylesheet（）機能を呼び出します。

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

ログイン後にコピー

injectFontSstyLESHEET（）関数はXHRリクエストを発行してフォントファイルのコンテンツを取得し、InjectRawStyle関数でタイトルに挿入し、ローカルストレージに保存します。

この関数は、ドキュメントのヘッドにスタイルタグを作成し、テキストパラメーターを介してその内容を取得します。この段階では、フォールバッククラスをフォントクラスにWebフォントスタイルに置き換えます。

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

ログイン後にコピー

ここで、実際のスタイルのフォントとWebフォントに頼る必要があります。ブラウザを更新し、コンテンツの再配置を観察することにより、これらのスタイルをテストできます。目標は、フォールバックフォントスタイルを可能な限り一致させて、実際のスタイルを作成して、変化の認識がほとんど感知できなくなるようにすることです。

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

ログイン後にコピー

（デモンストレーションと概要の部分は長すぎます。実際の条件に応じて選択的に保持または合理化することをお勧めします）

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

ログイン後にコピー

この部分には、主にCodepenデモンストレーションリンクと以前のコンテンツの要約が含まれています。必要に応じて調整します。重要なのは、サブセット、フォールバックフォント、ローカルストレージの使用方法など、コア技術ポイントを保持することです。 FAQセクションは、必要に応じて合理化または保持することもできます。

以上がサブセットとローカルストレージでのフォントパフォーマンスの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。