我寫(xiě)道，使用Inline

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

斯科特·傑爾（Scott Jehl）寫(xiě)道，僅僅因?yàn)槟度胧侥澄飦K不意味著您不能緩存它。讓我們看看Scott的想法是否可以擴(kuò)展到SVG圖標(biāo)。

從內(nèi)聯(lián)SVG開(kāi)始

像這樣…

 



  <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>

將文本作為文件扔進(jìn)瀏覽器緩存非常容易

在上面的HTML中，選擇器.icon-Alarm將為我們提供該圖標(biāo)的整個(gè)SVG。

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

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

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

請(qǐng)參閱文件路徑 /icons/icon-wheelchair.svg？那有點(diǎn)彌補(bǔ)。但這確實(shí)將放在該位置的緩存中。

讓我們確保瀏覽器在請(qǐng)求時(shí)將文件從緩存中獲取

我們將在我們的頁(yè)面上註冊(cè)一名服務(wù)工作者：

 if（navigator.serviceworker）{   
  navigator.serviceworker.register（'/sw.js'，{
    範(fàn)圍： '/'
  }）;
}

服務(wù)工作者本身將很小，只是一個(gè)緩存匹配器：

 self.addeventlistener（“ fetch”，event => {
  讓請(qǐng)求= event.request;

  event.respondwith（
    caches.match（請(qǐng)求）。然後（響應(yīng)=> {
      返迴響應(yīng)||提?。ㄕ?qǐng)求）;
    }））
  ）；
}）;

但是……我們從不要求該文件，因?yàn)槲覀兊膱D標(biāo)是內(nèi)聯(lián)的。

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

 <svg>
   
</svg>

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

（我有點(diǎn)驚訝。

即使該文件不在緩存中，假設(shè)我們實(shí)際上在文件系統(tǒng)上將此文件卡在了某種“ Include”的結(jié)果上（我在演示上使用了Nunjucks）。

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

真的。我喜歡上述內(nèi)容的是，它利用緩存，圖標(biāo)應(yīng)立即呈現(xiàn)。而且您可以這樣樣式進(jìn)行一些樣式，例如，設(shè)置父圖標(biāo)上的填充物應(yīng)該通過(guò)創(chuàng)建並為內(nèi)部的SVG元素著色的陰影DOM。

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

因此，增強(qiáng)它們！我們可以異步加載一個(gè)腳本，該腳本可以找到每個(gè)SVG圖標(biāo)，Ajaxs的SVG，並替換 stuck…

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

圖示. foreach（圖標(biāo)=> {
  const url = icon.queryselector（“ use”）。 getAttribute（“ xlink：href”）; //可能也想尋找HREF
  提?。╱rl）
    。
    。然後（data => {
      //這可能是有點(diǎn)刺耳的。比我聰明的人可能可以解決這個(gè)問(wèn)題。

      //用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>

現(xiàn)在，假設(shè)此JavaScript正確執(zhí)行，則此頁(yè)面像原始頁(yè)面一樣具有內(nèi)聯(lián)SVG。

演示與倉(cāng)庫(kù)

• 網(wǎng)絡(luò)上的演示
• 在Github上存儲(chǔ)

以上是內(nèi)聯(lián)SVG ...緩存的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！