프런트엔드 브라우저 캐시를 사용하는 방법

이전에도 브라우저 캐싱을 소개한 적이 있고, HTML 오프라인 캐싱도 소개했는데, 너무 많이 이야기하면 헷갈리기 쉽습니다. 오늘은 이러한 캐시의 차이점과 사용 방법을 알려드리겠습니다.

200 from memory 캐시는 서버에 접근하지 않고 직접 캐시를 읽어 메모리에서 캐시를 읽어옵니다. 이때의 데이터는 메모리에 캐시되어 프로세스가 종료된 후, 즉 브라우저가 닫힌 후에는 더 이상 존재하지 않게 됩니다. 하지만 이 방법은 서버에 액세스하지 않고 디스크 캐시에서 파생된 리소스

200개만 캐시할 수 있으며, 캐시를 직접 읽고, 프로세스가 종료되어도 데이터는 여전히 존재합니다. 이 메서드는 파생된 리소스만 캐시할 수 있습니다.

304 Not Modified는 서버에 액세스하여 데이터가 업데이트되지 않았음을 확인합니다. 그런 다음 캐시에서 데이터를 읽습니다. 3차 캐싱의 원리

먼저 메모리가 있으면 직접 로드하세요.

메모리가 없으면 하드 디스크를 선택하여 가져오세요.

만약 메모리가 있으면 직접 로드하세요. 하드 디스크가 없으면 네트워크 요청을 하세요

Load it 리소스는 하드 디스크와 메모리에 캐시됩니다.

일반 탐색

사진

은 다음과 같습니다. 액세스-> 200 -> 그리고 들어오세요->200(디스크 캐시에서) ->새로 고침->200(메모리 캐시에서)

애플리케이션 캐시는 위의 캐시와 조금 다릅니다. 즉, 리소스를 인터넷에 연결하지 않고도 하드 디스크에서 읽을 수 있습니다. 인터넷 연결이 끊어져도 사용자는 탐색할 수 있습니다.

브라우저 캐시 설정

304 캐시를 협상하거나 서버와 한 번 통신해야 합니까? 서버 통신을 끊으려면 브라우저가 로컬 캐시(캐시 제어/만료)를 사용하도록 강제해야 합니다.

일반적으로 브라우저 캐시를 설정하는 방법에는 여러 가지가 있습니다.

1. HTTP META를 통해 만료 및 캐시 제어 설정

<meta http-equiv="Cache-Control" content="max-age=7200" />
 <meta http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />

이렇게 작성하면 웹 페이지에만 유효하며 웹 페이지의 사진이나 기타 요청에는 유효하지 않습니다.

2. Apache 서버 구성 그림, CSS, js, 플래시 캐시

이 기술은 주로 서버 구성을 통해 구현됩니다. Apache 서버를 사용하는 경우 mod_expires 모듈을 사용하여 다음을 구현할 수 있습니다.

mod_expires 모듈을 컴파일합니다.

Cd  /root/httpd-2.2.3/modules/metadata/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译

먼저 httpd.conf 파일을 연 다음 만료 모듈을 검색한 후 왼쪽의 # 기호를 삭제하여 이 모듈이 활성화되었음을 표시하고 Apache 서버를 다시 시작하세요.

httpd.conf 구성을 편집하세요. : 다음 콘텐츠

<IfModule mod_expires.c>ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript      "access plus 1 months"
#ExpiresByType video/x-flv "access plus 1 months"</IfModule>

3, php 등을 추가합니다.

<?php
  header("Cache-Control: public");
  header("Pragma: cache");
  $offset = 30*60*60*24; // cache 1 month
  $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
  header($ExpStr);?>

또는

$seconds_to_cache = 3600;$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";header("Expires: $ts"); header("Pragma: cache");header("Cache-Control: max-age=$seconds_to_cache");

캐시된

을 사용한 프런트 엔드 코드 배포 질문 1: 캐시를 사용하여 프런트 엔드 코드를 업데이트하는 방법은 무엇입니까?

아래와 같이 리소스 파일이나 이미지 뒤에 버전 번호를 추가할 수 있습니다.

질문 2: 그런데 모든 파일에 버전 번호를 추가한 후 파일 하나만 변경했는데 다른 파일의 캐시가 낭비되는 것은 아닌가요?

이 문제를 해결하기 위해 데이터

summary

알고리즘을 사용하여 파일에 대한 요약 정보를 찾을 수 있으며, 요약 정보는 파일 내용과 일대일로 대응됩니다. 아래와 같이:

이렇게 하면 문제가 해결됩니다.

질문 3: 또 새로운 문제가 생겼습니다. 파일을 게시할 때 어떻게 해야 하나요?

1. 먼저 페이지를 배포한 다음 리소스를 배포합니다. 두 배포 사이의 시간 간격 동안 사용자가 페이지에 액세스하면 이전 리소스가 새 페이지 구조에 로드되고 이전 버전의 리소스가 로드됩니다. 캐싱 후 결과는 다음과 같습니다. 사용자는 수동으로 새로 고치지 않으면 리소스 캐시가 만료될 때까지 페이지에서 계속 오류를 실행합니다.

2. 리소스를 먼저 배포한 후 페이지 배포: 배포 시간 간격 내에 이전 버전 리소스의 로컬 캐시가 있는 사용자가 웹 사이트를 방문합니다. 요청한 페이지는 이전 버전이므로 리소스

reference

는 변경되지 않았습니다. 브라우저는 로컬 캐시를 직접 사용합니다. 이 경우 페이지는 정상적으로 표시되지만 로컬 캐시가 없거나 캐시가 만료된 사용자가 웹 사이트를 방문하면 이전 버전의 페이지가 새 버전의 리소스를 로드하므로 페이지 실행 오류가 발생합니다. , 페이지가 배포되면 이 부분은 사용자가 해당 페이지를 다시 방문하면 정상으로 돌아옵니다.

그렇습니다. 위 분석을 통해 제가 말씀드리고 싶은 것은 누구도 먼저 배포할 수 없다는 것입니다! 이로 인해 배포 프로세스 중에 페이지 혼란이 발생합니다. 따라서 트래픽이 적은 프로젝트의 경우 R&D 학생들은 한밤중에 비밀리에 온라인에 접속하여 열심히 일할 수 있습니다. 먼저

정적 리소스를 로드한 다음 페이지를 배포하면 문제가 덜할 것 같습니다.

이러한 문제를 해결하는 방법은 무엇입니까?

이 문제는 게시된 리소스를 커버하기 위해 릴리스할 리소스를 사용하는 리소스의 오버레이 릴리스에서 발생합니다. 해결 방법은 간단합니다. 즉, 논커버리지 퍼블리싱을 구현하는 것입니다.

캐싱에 관한 내용은 매우 다양합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

HTML에서 디지털 포커스 차트 캐러셀 코드를 구현하는 방법

HTML에서 텍스트 마지막 줄이 불완전하게 표시되는 문제를 처리하는 방법

캔버스를 사용하여 입자 분수 애니메이션 효과를 만드는 방법

위 내용은 프런트엔드 브라우저 캐시를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!