HTML5 캐싱 메커니즘이란 무엇입니까? 캐시를 업데이트하는 방법
- 云罗郡主원래의
- 2019-01-04 10:45:177345검색
이 기사에서는 HTML5 캐싱 메커니즘이 무엇인지 설명합니다. 캐시를 업데이트하는 방법에는 특정 참고 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다. [추천 자료: Html5 Tutorial]
Background
오프라인 캐싱은 HTML5에서 제공하는 새로운 기능입니다. HTML5에서 제공하는 오프라인 캐싱 기능을 사용하면 사이트에서 일반적으로 사용되는 일부 파일을 로컬로 캐시할 수 있으며, 네트워크가 없는 경우에도 캐시된 페이지에 계속 액세스할 수 있습니다. html, css, js, 정적 이미지 리소스 등을 포함하되 이에 국한되지 않고 캐시할 수 있는 파일 형식은 다양합니다.
실제로 오프라인 캐싱은 네트워크가 없을 때만 사용되는 것이 아닙니다. 네트워크가 있을 때에도 로컬에 캐시된 파일이 먼저 사용됩니다. 네트워크가 있으면 브라우저는 200을 반환합니다.
오프라인 캐싱에는 많은 이점이 있습니다. 첫째, 사용자 경험을 효과적으로 개선하고 사용자 트래픽을 절약할 수 있습니다. 둘째, 페이지 로딩 속도를 향상시키고, 캐시된 리소스를 더 빠르게 로딩할 수 있습니다. 셋째, 서버 부하를 줄일 수 있으며 브라우저는 업데이트되거나 변경된 리소스만 서버에서 다운로드합니다.
브라우저 지원
IE를 제외한 모든 주류 브라우저는 기본적으로 이를 지원하는데, 결국 이런 종류의 브라우저와 호환되지 않는 것이 좋습니다.
Manifest
페이지에서 오프라인 캐싱을 사용하려면 해당 페이지의 HTML에 매니페스트 속성만 추가하면 됩니다. 사용 방법은 다음과 같습니다.
<!DOCTYPE HTML> <html manifest = "cache.appcache"> <body>…</body> </html>
브라우저가 페이지를 로드하고 html에 매니페스트 속성이 있는 것을 발견하면 캐시.appcache 파일을 요청합니다(ps: 이는 파일 이름일 뿐이며 일반적으로 .appcache로 끝납니다. 파일은 일반적으로 다음 위치에 있습니다. 프로젝트의 루트 디렉터리 다음)
btw: 매니페스트 파일은 MIME 유형으로 "text/cache-manifest"로 구성되어야 하며, 이는 필수입니다. 서버에서 구성해야 합니다.
매니페스트 파일(cache.appcache)이 어떻게 작성되어야 하는지 살펴보겠습니다
w3School에서 다음 정보를 찾았습니다.
CACHE MANIFEST - 이 제목 아래에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다
NETWORK - 이 제목 아래 나열된 파일은 서버에 대한 연결이 필요하며 캐시되지 않습니다.
FALLBACK - 이 제목 아래 나열된 파일은 페이지에 연결할 수 없는 경우(예: 404 페이지) 대체 페이지를 지정합니다.
cache.appcache 파일 다음은
# CACHE MANIFEST是必须的！ CACHE MANIFEST /style.css /logo.png /app.js # 不缓存的文件，永远不会被缓存，且离线时是不可用的 NETWORK: login.js # 可以使用星号来指示所有其他资源/文件都需要因特网连接： NETWORK: * # 注释：获取不到资源时的备选路径，就跳转到指定页面 FALLBACK: index.html 404.html
캐시 업데이트 방법
글 시작 부분에서 언급했듯이 브라우저가 html에 매니페스트 파일이 있음을 발견하면 먼저 캐시.appcache 파일을 요청한 다음 이를 기반으로 캐시합니다. 매니페스트 파일의 내용. 구체적인 프로세스는 다음과 같습니다
온라인 상황에서 애플리케이션에 처음 액세스하는 경우 브라우저는 매니페스트 파일의 내용을 기반으로 해당 리소스를 다운로드하여 오프라인에 저장합니다. 애플리케이션에 액세스하고 리소스가 오프라인으로 저장된 경우 브라우저는 오프라인 리소스를 사용하여 페이지를 로드한 다음 브라우저는 새 매니페스트 파일을 이전 매니페스트 파일과 비교합니다. 작업이 수행됩니다. 파일이 변경되면 파일의 리소스가 다시 다운로드되어 오프라인으로 저장됩니다.
오프라인일 때 브라우저는 로컬 캐시를 직접 사용합니다. 문제를 발견하셨나요? 코드를 업데이트한 후에도 브라우저가 여전히 원래 캐시를 사용한다면 어떻게 될까요?
가장 간단하고 조잡한 방법은 브라우저의 캐시를 수동으로 지우는 것입니다. 물론 프로덕션 환경에서는 이 작업이 대부분 수행되지 않습니다.
매니페스트 수정 방법
"#"으로 시작하는 줄은 주석이지만 다른 용도로도 사용할 수 있습니다. 매니페스트 파일이 변경되면 애플리케이션 캐시가 업데이트됩니다. 이미지를 편집하거나 JavaScript 기능을 수정하는 경우 이러한 변경 사항은 다시 캐시되지 않습니다. 주석 줄에서 날짜와 버전 번호를 업데이트하면 브라우저가 파일을 다시 캐시하게 됩니다.
위 내용은 HTML5 캐싱 메커니즘이란 무엇입니까? 캐시를 업데이트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!