責任ある、条件付き負荷

Polypaneブログには優れた記事があります（帰属ではありませんが、おそらくKilian Valkhofによって書かれた可能性が高いです）、Create A Webサイトを好むWebサイトを好み、 prefers-reduced-dataメディアのクエリについて説明しています。現在、ブラウザはそれをサポートしていませんが、最終的にはデータの使用量を削減するためにCSSで使用できます。ユーザーが低データの使用法を指定していない場合にのみ、Webフォントをロードするために記事に例が提供されています。

 @media（redured-reduced-data：no-preference）{
  @font-face {
    フォントファミリー： 'inter';
    font-weight：100 900;
    font-display：swap;
    フォントスタイル：通常。
    font-named-instance： 'remulation';
    src：url（ 'inter-roman.var.woff2'）format（ 'woff2'）;
  }
}

体 {
  font-family：inter、system-ui、-apple-system、blinkmacsystemfont、
               Segoe UI、Ubuntu、Roboto、Cantarell、Noto Sans、Sans-Serif、
               「Apple Color Emoji」、「Segoe Ui Emoji」、「Segoe Ui Symbol」、「Noto Color Emoji」;
}

これは良いモデルです。それはアクセシビリティと同じ精神であり、 prefers-reduced-motion 。どちらもJavaScriptから使用できます。

同じアイデアは、Umar Hansaの最近のブログ投稿「JavaScript：条件付きJavaScript、必要に応じてのみダウンロード」です。この記事には多くの例がありますが、ポイントは、 navigatorオブジェクトにデバイス、インターネット接続、ユーザーの好みに関する情報が含まれているため、ESモジュールと併用して、過度のコードなしでリソースを条件付きでロードできることです。

 if（navigator.connection.savedata === false）{
    Importを待ちます（ './ Costly-Module.js'）;
}

これらのアイデアのすべてに興味がある場合は、ここから始まる責任あるJavaScriptに関するJeremy Wagnerの一連の記事に飛び込むことができます。

以上が責任ある、条件付き負荷の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。