25x25 以下のモノトーン アイコンを 10 個ほどセットしています。どちらがより優れたパフォーマンスを発揮しますか:
1) データ URI を使用して CSS に埋め込む
2) フォントとして読み込む ( IcoMoonなど)
フォントとしてロードすると、http: 呼び出しが行われるため、メリットが少ないように思われます。
このプロジェクトで先月 IcoMoon を使用しましたが、SVG に変更を加えてアプリに再アップロードする必要がある場合は、少し面倒です。フォントと画像を扱う場合、CSS もかなり厄介です。SVG を base64 でエンコードすることで頭痛が解消され、それで済むようです。
では、何が最善の方法だと言えますか？またはそれらの代替ですか？Webkit、Mozilla、IE8+ 向けに最適化しています。
それは依存します™。
データ URI はモバイルでは遅いようですが、1KB 未満のアイコンを埋め込むとパフォーマンスが向上する可能性があります。また、ページごとに画像が使用される頻度にも依存します — データ URI は使用するたびに圧縮解除する必要があるようです。
残念ながら、データ URI と @font-face アイコン フォントのモバイル パフォーマンスを比較した人はまだないようです。理想的には、実際の RUM テストを行って、その結果を公開してください ^_^ その場合は、アイコン フォントを Base64 でエンコードされたデータ URI として CSS に埋め込むことも確認してください:D
最後に、ワークフローを自動化できるGrunt プラグインがいくつかあり[data-icon]ます。アイコン フォントに -style 埋め込みを使用すると、CSS の混乱が軽減されます (attr() は IE8+ でサポートされています)。
PS とりとめもなくすみません。この情報も欲しいです…</p>