인라인 svg ... 캐시

인라인

그러나 인라인 코드에는 몇 가지 단점이 있으며 그 중 하나는 캐싱을 이용하지 않는다는 것입니다. 브라우저를 읽고 찾아 볼 때 동일한 코드를 읽고 처리하고 있습니다. 그렇게 큰 거래는 아닙니다. 튀길 수있는 훨씬 더 큰 공연 물고기가 있습니다. 그러나 더 효율적인 패턴에 대해 생각하는 것은 여전히 ​​재미 있습니다.

Scott Jehl은 당신이 무언가를 인화한다고해서 캐시 할 수 없다는 것을 의미하지는 않습니다. Scott의 아이디어가 SVG 아이콘으로 확장 될 수 있는지 봅시다.

인라인 SVG로 시작합니다

이와 같이…

 



  <title> 인라인 svg </title>
  <link rel="스타일" href="/styles/style.css">




  ...
 
  <svg width="24" height="24" viewbox="0 24 24" xmlns="http://www.w3.org/2000/svg">
     
  </svg>

파일로서 브라우저 캐시에 텍스트를 버리기가 이상하게 쉽습니다.

위의 HTML에서, 선택기 .ICON- 알람은 해당 아이콘에 대한 SVG의 전체 덩어리를 가져올 것이다.

 const iconhtml = docum

그런 다음 다음과 같은 브라우저의 캐시에 넣을 수 있습니다.

 if (창에서 "캐시") {
  Caches.open ( 'static').
    Cache.put ( "/Icons/Icon-Wheelchair.svg", 새 응답 (
      iconhtml,
      {헤더 : { 'content-type': 'image/svg xml'}}}
    ));
  }
}

파일 Path /icons/icon-wheelchair.svg를 참조하십시오. 그것은 방금 만들어졌습니다. 그러나 실제로 해당 위치의 캐시에 넣을 것입니다.

요청시 캐시에서 브라우저가 해당 파일을 가져 오는지 확인합시다.

페이지에 서비스 작업자를 등록하겠습니다.

 if (navigator.serviceworker) {   
  navigator.serviceworker.register ( '/sw.js', {
    범위 : '/'
  });
}

서비스 작업자 자체는 캐시 매칭 자일뿐입니다.

 self.addeventListener ( "fetch", event => {
  요청 = event.request;

  event.respondwith (
    caches.match (request).
      반환 응답 || 페치 (요청);
    })
  );
});

그러나… 아이콘이 인라인이기 때문에 우리는 해당 파일을 요청하지 않습니다.

진실. 그러나 다른 페이지가 해당 캐시의 혜택을 받으면 어떻게됩니까? 예를 들어, SVG 아이콘은 다음과 같이 페이지에 배치 할 수 있습니다.

 <svg>
  <xlink : href="/icons/icon-alarm.svg#Icon-Alarm"></xlink> 
</svg>

/icons/icon-alarm.svg가 캐시에 준비되어 있기 때문에 브라우저는 행복하게 캐시에서 뽑아서 표시합니다.

(나는이 작품에 놀랐습니다. Edge는 파일에 링크하는 요소를 좋아하지 않지만 곧 끝날 것입니다. 업데이트 , 끝이 끝났습니다. Edge는 Chromium이되었습니다.)

파일이 캐시에 없어도 파일 시스템 에서이 파일을 실제로 chuck한다고 가정 할 때 어떤 종류의 "포함"의 결과 (데모에 nunjucks를 사용했습니다).

그러나… 그리고 인라인 SVG는 그다지 같지 않습니다

진실. 위의 내용은 캐시를 사용하고 아이콘이 즉시 가깝게 렌더링해야한다는 것입니다. 예를 들어, 부모 아이콘의 채우기를 설정하면 가 내부의 SVG 요소를 생성하고 채색하는 그림자 돔을 통과해야합니다.

그럼에도 불구하고, 그것은 동일하지 않습니다. Shadow Dom은 인라인 SVG에 비해 큰 장벽입니다.

그래서 그들을 향상시킵니다! 우리는 각 svg 아이콘, 필요한 svg에 대한 ajax를 찾는 스크립트를 비동기로로드하고 stuff…를 대체 할 수 있습니다.

 CONRD ICONS = DOCUTED.QUERYSELECTERALL ( "SVG.ICON");

Icons.foreach (icon => {
  const url = icon.querySelector ( "use"). getAttribute ( "xlink : href"); // href도 찾고 싶을 수도 있습니다
  페치 (URL)
    . then (response => response.text ())
    . 그런데 (data => {
      // 이것은 아마도 약간 레이아웃 스래쉬 일 것입니다. 나보다 똑똑한 사람은 아마 그것을 고칠 수있었습니다.

      // <svg> <use> </use></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);
      부모님 removechild (Newel);
    });
});</span>

이제이 JavaScript가 올바르게 실행된다고 가정하면이 페이지에는 원래 페이지와 마찬가지로 Inline SVG를 사용할 수 있습니다.

데모 & 리포

• NetLify의 데모
• github에 대한 리포

위 내용은 인라인 svg ... 캐시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!