インラインSVG ...キャッシュ

インライン

しかし、コードを挿入するにはいくつかの欠点がありますが、その1つはキャッシュを利用しないことです。ブラウザを読み取り、同じコードを何度も何度も処理しています。それほど大したことではありません。揚げるにははるかに大きなパフォーマンスの魚がありますよね？しかし、より効率的なパターンについて考えるのはまだ楽しいです。

Scott Jehlは、あなたが何かをインラインにしたからといって、あなたがそれをキャッシュできないという意味ではないと書いています。 ScottのアイデアがSVGアイコンに拡張できるかどうかを見てみましょう。

インラインSVGから始めます

このような…

 



  <title> inline svg </title>
  <link rel="styleSheet" href="/styles/style.css">




  ...
 
  <svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M11.5,22C11.64,22 11.77,22 11.9,21.96C12.55,21.82 13.09,21.38 13.34,20.78C13.44,20,20.54 13.5,20.27 13.5,20H9.5A2,2 0 11.5,22M18,10.5C18,7.43 15.86,4.86 13,4.18V3.5A1.5,1.5 0 0,0 11.5,2A1.5,1.5 0,0 10,3.5V4.18C7.13,4.86 5,7.43.43.43.43 5,10.5V16L3,18V19H20V18L18,16M19.97,10H21.97C21.82,6.79 20.24,3.97 17.85,2.15L16.42,3.58C18.46,5 19.82,7.35 19.97,10m6.58,3.58L5.15,2.15C2.76,3.97 1.18,6.79 1,10H3C3.18,7.35 4.54,5 6.58,3.58Z "> </path>
  </svg>

ファイルとしてテキストをブラウザキャッシュに投げるのは奇妙に簡単です

上記のHTMLでは、Selector .Icon-AlarmがそのアイコンのSVGのチャンク全体をフェッチします。

 const iconhtml = document.querySelector（ "。ICON-ALARM"）。

次に、このようにブラウザのキャッシュに輝くことができます。

 if（windowの「キャッシュ」）{
  caches.open（ 'static'）。then（function（cache）{
    cache.put（ "/icons/icon-wheelchair.svg"、new Response（
      iconhtml、
      {headers：{'content-type'： 'image/svg xml'}}
    ））;
  }
}

ファイルpath /icons/icon-wheelchair.svgを参照してください。それはちょっと構成されています。しかし、それは本当にその場所のキャッシュに入れられます。

要求されたときにブラウザがキャッシュからファイルを出力することを確認しましょう

ページにサービスワーカーを登録します。

 if（navigator.serviceworker）{   
  navigator.serviceworker.register（ '/sw.js'、{
    スコープ： '/'
  }）;
}

サービスワーカー自体は非常に小さく、キャッシュマッチャーだけです。

 self.addeventlistener（ "fetch"、event => {
  request = event.request;

  event.respondwith（
    caches.match（request）.then（response => {
      返信応答|| fetch（request）;
    }）
  ）;
}）;

しかし…アイコンはインラインなので、そのファイルを要求することはありません。

真実。しかし、他のページがそのキャッシュの恩恵を受けた場合はどうなりますか？たとえば、SVGアイコンは次のようなページに配置できます。

 <svg>
  <xlink></xlink> 
</svg>

/icons/icon-alarm.svgはキャッシュで準備ができているため、ブラウザはキャッシュから喜んでそれを取り出して表示します。

（私はこれが機能することにちょっと驚きました。エッジはファイルにリンクする要素が好きではありませんが、それはすぐに終わります。更新、それは終わった、エッジはクロムになりました。）

また、ファイルがキャッシュにない場合でも、ファイルシステム上のこのファイルを実際にチャックしていると仮定すると、ある種の「include」の結果が表示されます（デモでnunjucksを使用しました）。

しかし、…およびインラインSVGはまったく同じではありません

真実。私が上記で気に入っているのは、それがキャッシュを利用していることであり、アイコンがすぐに近くにレンダリングする必要があることです。また、このようにスタイルを整えることができるものがいくつかあります。たとえば、親アイコンに塗りつぶしを設定すると、がSVG要素を作成および色付けするシャドウドムを通過する必要があります。

それでも、それは同じではありません。シャドウドムは、インラインSVGと比較して大きな障壁です。

だから、それらを強化してください！各SVGアイコンを見つけ、必要なSVGのAjaxsを見つけ、のものを置き換えるスクリプトを非同期的にロードできます…

 const icons = document.queryselectorall（ "svg.icon"）;

icons.foreach（icon => {
  const url = icon.queryselector（ "use"）。getattribute（ "xlink：href"）; // HREFも探したいかもしれません
  フェッチ（url）
    .then（response => respons.text（））
    .then（data => {
      //これはおそらく少しレイアウトスラッシュです。私より賢い人はおそらくそれを修正することができました。

      // <svg> <suse> </suse></svg>をインラインSVGに置き換えます
      const newel = document.createelement（ "span"）;
      newel.innerhtml = data;
      icon.parentnode.replacechild（newel、icon）;

      // <span> sを削除します
      const parent = newel.parentnode;
      while（newel.firstchild）parent.insertbefore（newel.firstchild、newel）;
      parent.RemoveChild（Newel）;
    }）;
}）;</span>

このJavaScriptが正しく実行されると仮定すると、このページには元のページと同じようにインラインSVGが利用可能になります。

デモ＆レポ

• netlifyのデモ
• Githubのレポ

以上がインラインSVG ...キャッシュの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。