Chrome 메모리 캐시와 디스크 캐시

크롬 메모리 캐시와 디스크 캐시에 관심이 있습니까? 나는 webpack, common chunks 플러그인을 사용하고 chunkhash로 모든 파일을 생성합니다.

메모리는 디스크 캐시와 어떻게 다릅니 까? 내 페이지를 다시로드하면 일부 파일은 메모리 캐시에서로드되고 일부는 디스크 캐시에서로드됩니다 (메모리 캐시의 bundle.js 및 image.jpg, 디스크 캐시의 CSS). 때로는 다릅니다. 그것을 제어하고 어디에서로드되는 것을 선택할 수 있습니까? 메모리 캐시가 디스크 캐시보다 빠른 것 같습니다.

그들의 이름이 말했듯이 :

"메모리 캐시"는 메모리 (RAM)에 리소스를 저장하고로드합니다. 따라서 이것은 훨씬 빠르지 만 비 지속적입니다. 브라우저를 닫을 때까지 콘텐츠를 사용할 수 있습니다.

"디스크 캐시"는 영구적입니다. 캐시 된 리소스는 저장되고 디스크에서로드됩니다.

간단한 테스트 : Chrome 개발자 도구 / 네트워크를 엽니 다. 페이지를 여러 번 새로 고침합니다. 테이블 열 "크기"는 일부 파일이 "메모리 캐시에서"로드되었음을 알려줍니다. 이제 브라우저를 닫고 개발자 도구 / 네트워크를 다시 열고 해당 페이지를 다시로드합니다. 메모리 캐시가 비어 있기 때문에 모든 캐시 된 파일은 이제 "디스크 캐시에서"로드됩니다.

Chrome은 다양한 추상화 수준에서 캐시를 구현합니다. 핵심에는 다른 캐싱 메커니즘을위한 백엔드 인 HTTP (브라우저) 캐시가 있습니다. 일반적으로 캐시는 다음과 같이 나눌 수 있습니다.

• HTTP 캐시
• 서비스 워커 캐시
• 깜박임 캐시

HTTP 캐시

네트워크를 통해 이루어지는 모든 요청은 RFC를 준수하는 HTTP 캐시에 의해 프록시됩니다 . 처음 요청하면 캐시를 덮어 씁니다. 리소스는 원본 URL로 입력됩니다.

서비스 워커 캐시

네트워크 연결 실패를 정상적으로 처리하기 위해 서비스 워커를 사용할 수 있습니다 . 캐시와 캐시 스토리지는 디스크에서 다시 가져옵니다.

깜박임 캐시

Blink는 메모리와 단순 (파일 시스템)의 두 가지 생성 모드에서 Http Cache를 백엔드로 사용합니다. 어느 것이 사용되는지는 캐시가 사용할 수있는 메모리 양에 대해 전역 적으로 설정된 제한에 따라 다릅니다. 또한 현재 렌더러 캐시가 가장 많은 점유율을 얻습니다. 캐시 된 것은 글꼴, 이미지 및 스크립트입니다. 전역 메모리 사용량이 지정된 임계 값에 도달하면 파일 시스템 백엔드가 사용됩니다.

메모리 캐시 강제

기본 메커니즘을 재정의하는 메모리에서 파일을 제공하려면 고유 한 서비스 워커를 구현할 수 있습니다. File Api를 사용하면 리소스를 읽고 메모리의 개체에 저장할 수 있습니다. 그런 다음 fetch 이벤트를 재정의하면이 전역 개체에서 제공되는 콘텐츠와 함께 네트워크 및 파일 읽기가 억제됩니다.