2010-01-26 7 views
11

클라이언트 다운로드 시간과 네트워크 사용량을 절약하려면 HTML5의 localStorage 기능을 사용하여 링크 된 스타일 시트, 자바 스크립트 파일 및 이진 데이터의 내용 (예 : 이미지), 매번 서버를 때리는 것보다는?애셋 (스타일 시트, 자바 스크립트, 이미지 등) 용 HTML5 localStorage

JavaScript를 사용하지 않고 페이지를 분리하면 script 또는 link 요소가 아닌 JavaScript를 통해 링크 된 애셋을 추가해야한다고 생각하기 때문에 복잡합니다. 브라우저에서 다운로드하기 전에 내용을 구문 분석 할 수없는 경우 (HEAD에 마지막으로 수정 한 날짜 및 기타 헤더를 ​​확인하도록 요청한 경우)

또는 304 Not ModifiedeTag 헤더를 사용하는 것이 가장 좋습니까?

답변

9

나는 오프라인 캐싱을 고려해야한다이 경우에 생각 :

할 수 있습니다 로컬 스토리지 또는 sessionStorage에 저장할 수도 사용자가 입력 한 데이터 :

globalStorage (표준이 아님)를 사용하지 마십시오.

내가 오프라인에 대한 기사를 작성했습니다, 참조 : http://hacks.mozilla.org/2010/01/offline-web-applications/

오프라인 대해,하지만 이러한 메커니즘은 웹 응용 프로그램을 강화하는 데 사용할 수 있습니다.

+0

사이트를 오프라인으로 만들지 않고도 캐싱을 활용할 수 있습니까? 또는 스타일 시트와 JavaScript를 위해 브라우저에 남겨 두는 편이 낫습니다 (단, 머리글을 멀리 사용하고 304 헤더를 설정하십시오. PHP 또는 ASP.NET에서 추가 작업이 이루어지기는하지만). 이미지는 많은 대역폭을 차지하고 변경되지 않지만 여전히 다운로드됩니다 (브라우저 캐시가 제대로 작동하지 않는 것처럼) – SamWM

+0

파일은 클라이언트 연결 상태와 상관없이 매니페스트를 업데이트 한 경우에만 가져옵니다. –

3

base64 인코딩을 사용하여 이미지/이진 데이터를 localStorage에 문자열로 저장할 수 있습니다. base64 URL은 몇 가지 브라우저에서 작동하지 않으므로 완벽한 해결책은 아닙니다.

CSS와 js는 괜찮 으면 페이지에 쓸 수도 있고 base64 URL을 사용할 수도 있습니다.

JS를 사용하지 않도록 사이트를 깨는 것에 대해 걱정하지 않으셔도됩니다. JS가 비활성화되어 있어도 어쨌든 localStorage에 액세스 할 수 없습니다.

+2

js를 실행하지 않는 사람들은 대부분의 웹 사이트가 중단 될 것으로 예상해야합니다. 개발자는이를 지원할만한 가치가 있는지 미리 생각해야합니다. –

+0

자바 스크립트가 필요한 기능을 추가하는 경우 원래의 대체 동작을 전적으로 사용하지 않는 것이 좋습니다. – garrow

+4

예, 저는 모두 정상적인 성능 저하를위한 것이지만, 때로는 별도의 코드가 필요하며 때로는 가치가없는 추가 작업입니다. IE6에서도 마찬가지입니다. –

관련 문제