CSS 및 JavaScript를 저장하기 위해 HTML5 로컬 저장소를 사용하는 것이 현실적입니까?

아이디어는 자주 액세스하는 CSS 및 JavaScript를 저장하기 위해 HTML5 로컬 스토리지를 사용하는 것입니다.

예를 들어 (의사 코드) :

var load_from_cdn = true;
경우 (로컬 저장소 감지)  
{
  if (cs의 캐시, js가 발견되었습니다)
  {
     로컬 스토리지 캐시를로드
     load_from_cdn = 거짓;
  }
}
if (load_from_cdn)
{
   document.write ( '<스크립트> ...');
}

이것이 가능하거나 현실적인가?

브라우저 캐시를 알고 있지만 헤더 액세스 검사가 여전히 있습니다
.HTTP 액세스가 더 이상 없다고 가정합니다 (제 생각에는 )

추신 : 로컬 스토리지는 키-값 쌍 만 지원하는 것 같습니다. 누군가가 그것을 증명할 수 있습니까?
(일부 예에서 가장 좋습니다)

로컬 저장소를 사용하여 JS와 CSS를 저장하는 것은 절대적으로 좋습니다. 그러나 로컬 저장소에는 도메인 당 5M 제한이 있습니다. 이 전략을 재고해야 할 수도 있습니다.

데스크탑 웹의 경우 기본 브라우저 캐시를 활용하여 트릭을 수행 할 수 있습니다. JS & CSS HTTP 응답을 캐시 가능하도록 설정하십시오. 간단하고 쉽습니다.

모바일 웹의 경우 대기 시간이 높습니다. 따라서 HTTP 요청을 줄이는 것이 중요합니다. 따라서 외부 URL에 JS 및 CSS를 사용하는 것이 가장 좋습니다. JS & CSS를 인라인하는 것이 훨씬 좋습니다. 이것은 HTTP 요청을 줄이지 만 HTML 내용을 부풀렸다. 그리고 뭐? 말씀 드린대로 로컬 스토리지를 사용하십시오!

한 브라우저가 사이트를 처음 방문하면 JS 및 CSS가 인라인으로 표시됩니다. JS에는 두 가지 작업이 더 있습니다. 1) JS 및 CSS를 로컬 저장소에 저장합니다. 2) JS & CSS가 로컬 스토리지에 있음을 표시하도록 쿠키를 설정하십시오.

브라우저가 사이트에 두 번째로 액세스하면 서버가 쿠키를 가져 와서 브라우저에 이미 JS 및 CSS 관련이 있음을 알고 있습니다. 따라서 렌더링 HTML에는 인라인 JS가있어 로컬 저장소에서 JS 및 CSS를 읽고 DOM 트리에 삽입합니다.

이것이 bing.com 모바일 버전을 만드는 기본 아이디어입니다. 프로덕션 환경에서 구현할 때 JS & CSS 버전 관리를 고려해야합니다.

감사

브라우저가 이미이 작업을 수행하지 않았습니까?

점은 무엇인가?

클라이언트 측 캐싱이라는 이미 확립 된 기술이 있습니다. 이 경우 HTML5 로컬 스토리지는 어떤 캐싱이 누락 되었습니까?

캐시를 효과적으로 사용할 수 없도록 JavaScript 코드 덩어리를 동적으로로드해야하는 이상한 응용 프로그램이있을 수 있지만 매우 드문 경우입니다.

또한 다른 것을 알고 있어야합니다. 브라우저에는 캐시에 대한 특정 정책이 있으며 대부분의 브라우저는 캐시를 잘 관리하는 데 능숙합니다 (이전 콘텐츠 만 제거). 집에서 만든 캐시를 구현하면 브라우저가 캐시를 올바르게 관리하지 못하게됩니다. 그것은 스스로 비판받을 수있을뿐만 아니라 조만간 당신을 해칠 것입니다. 예 : 웹 응용 프로그램 사용자가 버그를보고 할 때 종종 캐시를 지우도록 요청하여 응답합니다. 캐시를 지우면 웹 앱 관련 문제가 해결되지 않으므로 귀하의 사례에서 무엇을 물어볼 지 잘 모르겠습니다.

첫 번째 수정 (주제 이외의 두 번째 수정)에 대한 답변 :

브라우저 캐시를 알고 있지만 헤더 액세스 검사가 여전히 있습니다.

브라우저 캐싱에 대한 이해가 부족한 것 같습니다. 그렇기 때문에 자체 제작 한 캐싱 메커니즘을 구현하기 전에 먼저 작동 방식을 이해해야합니다 . 기존 휠을 충분히 이해하고 사용하지 않을 충분한 이유가있는 경우에만 자신의 휠을 다시 만드십시오. "바퀴를 재창조하고 후회하지 말라"는 질문에 대한 나의 대답의 1 번을 참조하십시오 .

HTTP를 통해 일부 데이터를 제공 할 때 캐시와 관련된 몇 가지 헤더를 지정할 수 있습니다.

• Last-Modified 내용이 변경된시기를 지정합니다.
• Expires내용이 변경된 경우 브라우저가 서버에 요청해야하는시기를 지정 합니다 .

이 두 헤더를 사용하면 브라우저에서 다음을 수행 할 수 있습니다.

• 콘텐츠를 반복해서 다운로드하지 마십시오. 경우 Last-Modified지난 달로 설정하고, 내용이 이미 몇 시간 전에 오늘을 다운로드 한, 다시 다운로드 할 필요가 없습니다.
• 파일이 마지막으로 수정 된 날짜를 쿼리하지 마십시오. 경우 Expires캐시 엔티티 월 5 ^일 , 당신이 어떤 GET 요청을 발행하지 않아도, 2014도 2011,도 2012 또는 2013 년, 당신은 캐시가 최신 상태인지 알 수 있기 때문이다.

두 번째는 CDN에 필수적입니다. Google은 Stack Overflow 방문자 에게 JQuery 를 cdn.sstatic.net제공하거나 Stack Overflow에서 사용하는 이미지 또는 스타일 시트를 제공 할 때마다 브라우저가 매번 새 버전을 쿼리하는 것을 원하지 않습니다. 대신, 해당 파일을 한 번 제공하고 만료 날짜를 충분히 길게 설정하면됩니다.

예를 들어 Stack Overflow 홈페이지에 올 때 무슨 일이 일어나고 있는지 스크린 샷은 다음과 같습니다.

제공 할 파일이 15 개 있습니다. 그러나 모든 304 Not Modified응답 은 어디에 있습니까? 변경된 콘텐츠 요청이 3 개뿐입니다. 다른 모든 것의 경우 , 브라우저는 서버에 요청하지 않고 캐시 된 버전을 사용합니다 .

결론적으로, 자체 캐시 메커니즘을 구현하기 전에 실제로 두 번 생각해야하며 특히 유용한 시나리오를 찾아야합니다 . 내 대답의 시작 부분에서 말했듯이 하나만 찾을 수 있습니다. 여기서 JavaScript 덩어리를 제공하여 OMG를 통해 사용할 수 있습니다 eval(). 그러나이 경우 더 나은 접근 방식이 있다고 확신합니다.

• 표준 캐시 기술을 사용하는 것이 더 효과적이거나
• 유지하기가 더 쉽습니다.

클라이언트 측 로컬 캐싱은 HTML5 로컬 스토리지를 사용하는 것보다 훨씬 최적화되어 있어야합니다. 자바 스크립트와 CSS가 외부 캐시 파일에 있는지 확인하고 로컬 저장소에서 추출하여 직접 실행하는 것보다 브라우저 캐시를 통해 페이지를 훨씬 빠르게로드해야합니다.

게다가 브라우저는 페이지로드가 시작될 때 외부 리소스로드를 시작할 수 있습니다. 실제로 해당 페이지에서 자바 스크립트를 실행하여 HTML5 로컬 저장소에서 리소스를 가져 오기 전에.

또한 HTML5 로컬 스토리지에서로드하려면 어쨌든 페이지에 코드가 필요하므로 모든 JS를 캐싱 가능한 외부 JS 파일 하나에 넣으십시오.

휠을 재발 명하는 대신 HTML5 오프라인 기능을 사용하십시오. http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

Google 코드 라이브러리 와 같은 CDN (콘텐츠 전송 네트워크)을 사용하면 성능이 훨씬 향상됩니다 . 신중하게 계획하면 대부분의 JS 및 CSS는 모든 방문자의 캐시에 있어야 사이트를 처음 방문 할 수 있습니다. 나머지를 축소하십시오.

브라우저 캐싱과 수동 롤 HTML5 솔루션을 벤치마킹 할 수 있습니다. 그러나 내기 내림은 기본 캐싱이 바지를 이길 것이라는 것입니다.

localStorage를 사용하는 것이 빠릅니다! 내 시험은 보여

• CDN에서 jQuery로드 : Chrome 268ms , FireFox : 200ms
• localStorage에서 jQuery로드 : Chrome 47ms , FireFox 14ms

HTTP 요청을 저장하면 이미 큰 속도 이점이 있습니다. 여기에있는 모든 사람들이 그 반대에 대해 유죄 판결을받은 것 같습니다.

내 결과를 테스트하려면 localStorage에 스크립트를 캐시하는 작은 라이브러리를 작성했습니다. Github https://github.com/webpgr/cached-webpgr.js 에서 확인 하거나 아래 예에서 복사하십시오.

완전한 라이브러리 :

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

라이브러리 호출

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});