內聯SVG ...緩存

我寫道，使用Inline

但是內部代碼有一些缺點，其中之一是它沒有利用緩存。您正在使瀏覽器讀取並在瀏覽時一遍又一遍地處理相同的代碼。並不是一件大事。有炸魚的性能要大得多，對嗎？但是考慮更有效的模式仍然很有趣。

斯科特·傑爾（Scott Jehl）寫道，僅僅因為您嵌入式某物並不意味著您不能緩存它。讓我們看看Scott的想法是否可以擴展到SVG圖標。

從內聯SVG開始

像這樣…

 



  <title> Inline SVG </title>
  <link rel="“" stylesheet href="%E2%80%9C/styles/style.css%E2%80%9D">




  ...
 
  <svg width="“" height="“" viewbox="“" xmlns="“" http:>
    <path d="“" m11.5></path></svg>

將文本作為文件扔進瀏覽器緩存非常容易

在上面的HTML中，選擇器.icon-Alarm將為我們提供該圖標的整個SVG。

 const iconhtml = document.queryselector（“。icon-alarm”）。 outerhhtml;

然後，我們可以這樣將其插入瀏覽器的緩存中：

如果（窗口中的“ caches”）{
  caches.open（'static'）。然後（function（cache）{
    cache.put（“/icons/icon-wheelchair.svg”，新響應（
      iConhtml，
      {標題：{'content-type'：'image/svg xml'}}}
    ）;
  }
}

請參閱文件路徑 /icons/icon-wheelchair.svg？那有點彌補。但這確實將放在該位置的緩存中。

讓我們確保瀏覽器在請求時將文件從緩存中獲取

我們將在我們的頁面上註冊一名服務工作者：

 if（navigator.serviceworker）{   
  navigator.serviceworker.register（'/sw.js'，{
    範圍： '/'
  }）;
}

服務工作者本身將很小，只是一個緩存匹配器：

 self.addeventlistener（“ fetch”，event => {
  讓請求= event.request;

  event.respondwith（
    caches.match（請求）。然後（響應=> {
      返迴響應||提取（請求）;
    }））
  ）；
}）;

但是……我們從不要求該文件，因為我們的圖標是內聯的。

真的。但是，如果其他頁面受益於該緩存該怎麼辦？例如，可以將SVG圖標放在頁面上：

 <svg>
   
</svg>

由於/CONS/ICON-ALARM.SVG坐在那裡的緩存中，瀏覽器會很樂意將其從緩存中摘下並顯示。

（我有點驚訝。

即使該文件不在緩存中，假設我們實際上在文件系統上將此文件卡在了某種“ Include”的結果上（我在演示上使用了Nunjucks）。

但是…和Inline SVG並不完全相同

真的。我喜歡上述內容的是，它利用緩存，圖標應立即呈現。而且您可以這樣樣式進行一些樣式，例如，設置父圖標上的填充物應該通過創建並為內部的SVG元素著色的陰影DOM。

儘管如此，它並不相同。與Inline SVG相比，Shadow Dom是一個很大的障礙。

因此，增強它們！我們可以異步加載一個腳本，該腳本可以找到每個SVG圖標，Ajaxs的SVG，並替換 stuck…

 const icons = document.queryselectorall（“ svg.icon”）;

圖示. foreach（圖標=> {
  const url = icon.queryselector（“ use”）。 getAttribute（“ xlink：href”）; //可能也想尋找HREF
  提取（url）
    。
    。然後（data => {
      //這可能是有點刺耳的。比我聰明的人可能可以解決這個問題。

      //用Inline SVG替換<svg> <svg> <suduse> </suduse></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></svg>

現在，假設此JavaScript正確執行，則此頁面像原始頁面一樣具有內聯SVG。

演示與倉庫

• 網絡上的演示
• 在Github上存儲

以上是內聯SVG ...緩存的詳細內容。更多資訊請關注PHP中文網其他相關文章！