프런트 엔드 캐시 최적화에

캐시에 대해서는, 다음과 같은 범주로 나눌 수 있습니다 :

① CDN 캐시

② DNS 캐시

③ 클라이언트 캐시 (메모리 캐시 요청없이 디스크 캐시; Etag입니다 / 마지막-Modified304 요청 인증이 필요)

④ 서비스 노동자 캐시 및 오프라인 캐싱

아약스 캐시 ⑤ 페이지 캐시

A, CDN 캐시

각 군 또는 읍 티켓 콘센트에 분산으로 CDN 이해 될 수 있으며, 사용자가 사이트를 탐색, CDN은 사용자 노드에 가장 가까운 사용자 요청 CDN 에지에 대한 응답을 선택합니다. 장점은 교차 지역 간 운영자 접속의 문제를 해결하기 위해 명백한 (1) CDN 노드 인 액세스 지연이 크게 감소된다; (2) CDN 에지 노드에서 완료 요청의 대부분은, CDN는 소스 스테이션을 줄일 전환 효과를 해왔다 부하.

CDN 캐시에 대한 로컬 브라우저 캐시 무효화 한 후, 브라우저는 CDN 에지 노드에 요청을 보냅니다. 유사 브라우저 캐싱, CDN 에지 노드는 캐싱 메커니즘이 존재한다. CDN 에지 캐시 노드와 서비스 제공 정책은 다양하지만, 일반적으로 표준 HTTP 프로토콜, HTTP 응답 캐시 제어 헤더를 따를 것이다 : 최대 사용 기간 필드는 시간 데이터 캐시 CDN 에지 노드를 설정할 수 있습니다.

클라이언트가 CDN 노드로부터 데이터를 요청하면 CDN 노드는 캐시 데이터가 만료되지 않은 경우 캐시 된 데이터가 클라이언트에 캐시 된 데이터에 직접 다음, 만료 여부를 결정하고, 그렇지 않으면 CDN 노드에서, 소스에 다시 소스 스테이션에 요청을 보내드립니다 소스 역은 데이터를 끌어 로컬 캐시를 업데이트하고 클라이언트에 최신 데이터를 반환합니다.

CDN 서비스 제공 업체는 일반적으로 캐시 기반의 CDN은 더 세련 캐시 관리를 사용자에게 제공하기 위해, 디렉토리 더 위도 시간을 파일 확장명을 지정할 수 있습니다.

CDN 캐시 새로 고침 :

CDN 에지 노드가 로컬 브라우저 캐시 무효화의 새로 고침을 강제로 브라우저 Ctrl + F5에 비해 개발자에게 투명, 개발자가 CDN 서비스 제공자 "새로 고침 캐시"를 통해 제공 할 수있는 CDN 에지 캐시 노드를 달성하기 위해 인터페이스를 정리 목적. 데이터를 업데이트 한 후 개발자, 당신은, 클라이언트가 액세스 할 수 있도록 만료 데이터 캐시에 CDN 노드를 강제로 "새로 고침 캐시"기능을 사용할 수 있도록, 최신 데이터를 당겼다.

두, DNS 캐시

DNS (도메인 이름 시스템) 서버 호스트 IP에 도메인 URL에 대한 책임.

DNS 조회 프로세스 : 브라우저 캐시가 존재 먼저 확인, 로컬 DNS 캐시에 대한 액세스 권한이없는, 그것은 로컬 DNS 서버에 액세스 할 수 없습니다. 따라서 DNS는 주어진 URL의 IP 주소가 DNS 조회가 완료되기 전에 브라우저가 호스트에서 아무것도를 다운로드 할 수 없습니다, 20-120ms 소요 찾을 수있는 브라우저는 일반적으로, 오버 헤드입니다.

TTL (라이브하려면 시간) : DNS 조회 기록이 생존 시간은 DNS 레코드가 삭제됩니다 후 만료 포함 반환 나타냅니다. 브라우저는 자체 DNS 캐시 만료 시간을 가지고,이 시간은 크롬에서만 약 1 분으로, 비교적 짧은 또한, 로컬 DNS 캐시 무관합니다.

DNS 성능 최적화 모범 사례

클라이언트의 DNS 캐시가 비어있는 경우, 웹 페이지의 수의 DNS 조회는 고유의 호스트 이름의 수와 같습니다. 따라서 DNS 조회의 수를 줄일 수있는 고유 호스트 이름의 수를 줄일 수있다.

그리고 때로는 호스트 DNS 부하 분산 지점의 수를 증가하여 DNS 조회를 줄이고 모순 관계, 전투 DNS 호스트 이름은 2-4 최고 설정 호스트의 수를 늘리기 위해 여러 설정이 필요합니다. 이상의로드 밸런싱은 Nginx의 부하 분산을 사용하는 등의 다른 방법으로 달성 될 수있다.

세 , 고객의 브라우저 캐시 정책 측 캐싱

1. 캐시 제어 : 최대 사용 기간

스크립트 파일 연도 변경되지 않습니다 인용 된 사이트를 가정, 다음 브라우저가 서버가 동일한 콘텐츠를 반환 할 때마다 요청하지 않는 스크립트 파일을 캐시합니다. 이 대역폭 비용 및 증폭 성능을 절약 할 수 있습니다.

캐시 제어 : 최대 사용 기간 = 31536000을 캐시 제어 설정 파일은 HTTP 헤더가 설정되어 반환해야합니다. // 캐시 시간을 제어 할 수 있습니다

표준은 최대 최대 사용 기간 값이 일년 초과 할 수 없습니다 지정하고 있기 때문에 초, 그래서 값은 31,536,000입니다.

이 주소 인 경우 동일한 스크립트는 www.haorooms.com/never-expire.js, 그래서 다음마다 사용자가 주소를 요청하면, 브라우저는 더 이상하지만 직접 로컬 브라우저에서 서버를 요청 수 없습니다 캐시을. 또는 1 년 사용자 끝날 때까지 수동으로 삭제.

그러나 스크립트 내용 중에 발견하는 방법을 변경해야? 예를 들어, 같은 파일 이름을 변경하는 요청이 결코 만료되지-v2.js을.

캐시 제어는 HTTP1.1 기능, 캐시 제어뿐만 아니라 다른 정보입니다 :

(1) 노 캐시 : 캐시에서 파일을 읽을하지 마십시오, 웹 서버에 캐시 요청은 신선한, 신선한 캐시 사용 여부를 확인합니다.

(2) 어떤 매장 : 클라이언트 캐시를 사용하여 클라이언트에 캐시가있는 경우 때 어떤 네트워크, 이것은 일반적으로 사용되는입니다 :이 필드는, 일시적으로 하드 디스크에 저장된 데이터를 매우 중요에만-경우 캐시되지 않은 표현되지 않는다

(3) 최대 - 부실이 : 한 캐시의 최대 - 오래된 시간으로 지정된 시간 이하이며, 사용을로드 할 수 있습니다. 네트워크 상황없이해야-재 검증 사용할 수 있습니다 : 같은 효과,하지만 더 엄격한 검사 모든 요청 캐싱 및 서버 소스 파일, 캐시의 사용에 대한 계약을,이 최신 취할 일치하지 않습니다.

있는 maxage를 덮고있는 maxage (4) S-있는 maxage은 / 있지만 공유 캐시, 전용 캐시는 무시 만료됩니다. 바이 공공 응답은 캐시 개체 (클라이언트, 프록시 서버 등의 송신 요구)를 나타낼 수 있습니다. 개인 응답은 단일 사용자 (아마도 운영 체제 사용자, 브라우저 사용자) 캐시 비 공유 할 수 없습니다 프록시 서버 캐시 될 수 있음을 나타냅니다.

2. 만료

만료 또한 브라우저를 설정하지 시간이 만료 될 때까지 서버는 요청을 보냅니다.

참고 :이 만료는 몇 가지 단점이있다, 이전보다 특성, 캐시 제어 HTTP1.0입니다. 고장 시간은 클라이언트가 로컬 시간이 변경되는 경우이므로, 절대 시간이기 때문에, 서버와의 편차가 커진다 클라이언트 때이를 캐시 혼란을 초래할 것이다.

두 개 이상의 버퍼가 3 단계 캐시, 캐시 제어의 원리를 따르고, 동시에 높은 캐시 제어의 우선 순위를 설정할 때, 서버 측 중 하나를 활성화하거나 인 에이블하도록 구성 될 수있는 동시에 만료.

3. 마지막으로 수정 304 개 상담 캐시

현재 파일의 서버 브라우저 버전을 알리기 위해, 예를 들어, 마지막 수정 시간 태그를 보냅니다

마지막 수정 : 2018년 (화) 그리니치 표준시 08시 26분 32초 1월 6일

캐시 (304) 협상이 경우 다음과 같이 검증 단계는 다음과 같습니다

① 브라우저 : 그것은 마지막으로 수정 된 경우 이봐, 내가,이 문서를 jquery.min.js 필요합니다 2018년 1월 6일 그리니치 표준시 08시 26분 32초 이후에 수정 화, 저를 보내 주시기 바랍니다

② 서버 : 파일 수정 시간을 확인

③ 서버 : 이봐,이 문서는 그 시간 이후에 수정되지 않은, 당신은 이미 최신 버전이

④ 브라우저 : 우수함, 나는 사용자에게 보여주지

4.있는 ETag

ETAG 304 비슷하지만 레벨이 마지막으로 수정 된 일부보다 높은

요청 과정 :

① 브라우저 : 이봐, 난 더 불일치 "61213-1762a-50bf790757204이"없다,이 문자열을이 문서의 haorooms의 main.css가 필요

②의 ETag을 확인 서버 ...)

③ 서버 : 이봐, 여기에 "61213-1762a-50bf790757204"내 버전이, 당신은 최신 버전의

④ 브라우저 : 음, 당신은 로컬 캐시를 사용할 수 있습니다

네, 서비스 노동자 캐시 및 오프라인 캐싱

서비스 (이하 SW라고 함) 작업자 규범 인기로, 캐시 인터페이스 SW 대안 HTTP 캐싱을 제공하는데 사용될 수있다. 물론 SW 기능은 버퍼링 기능뿐만 아니라, 강력하지만 오프라인, 데이터 동기화, 백엔드 컴파일러 등.

SW 캐시 코드의 표준 버전은 다음 코드가 있어야합니다

const version = '2';

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(`static-${version}`)
      .then(cache => cache.addAll([
        '/styles.css',
        '/script.js'
      ]))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

HTTP 캐시 미스로 전달 경우 네트워크, SW 스크립트를 도달하는 첫번째 요청합니다.

요청이 즉시 성공 반환, 자원의 캐시를 통해 이동하는 URL 내에서 일치하는 항목을 찾아 무대를 가져 오기 시작으로, 그렇지 않으면,이 코드는 설치 단계에서 우리가 캐시에 SW 및 styles.css가를 script.js됩니다 것을 의미 일반 네트워크 요청 과정을.

그들이 어디에서 온 그러나있는 자원의 내용에 무대를 설치? 여전히 HTTP 캐시에서 왔습니다. 이러한 SW 캐싱 및 HTTP 캐싱은 이전과 떨어질 수, 버전의 불일치는 말했다.

이 솔루션은 요청 SW가 서버에 인증해야하는 것입니다 :

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(`static-${version}`)
      .then(cache => cache.addAll([
        new Request('/styles.css', { cache: 'no-cache' }),
        new Request('/script.js', { cache: 'no-cache' })
      ]))
  );
});

각 요청 된 URL이 동일하지 있는지 확인하기 위해 임의의 숫자를 추가하여 있도록 간접 캐시 무효화를 모든 브라우저 캐시 구성 옵션을 지원하지만, 우리는 할 수 있습니다.

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(`static-${version}`)
      .then(cache => Promise.all(
        [
          '/styles.css',
          '/script.js'
        ].map(url => {
          // cache-bust using a random query string
          return fetch(`${url}?${Math.random()}`).then(response => {
            // fail on 404, 500 etc
            if (!response.ok) throw Error('Not ok');
            return cache.put(url, response);
          })
        })
      ))
  );
});

다섯, 아약스 캐시와 페이지 캐시

아약스 캐싱 페이스 북에 하나 개의 솔루션이 살리신 것을 페이지 캐시.

페이스 북은 식별 할 수있는 프레임 워크를 설계 여부를 캐시에서 페이지 (추측 : 페이지가 먼저 모든 아약스 콜백 결과 캐싱을로드되고 AJAX는 BigPipe에 따라 페이지의 콘텐츠, 지역 .Facebook 페이지에 참여를 얻을 후) 캐시에서, 아약스에 의한 경우 (: DIV 자료 미리 콜백 핸들러 본 JS 지불 대응하는 원하는 페이지 및 페이지 다운 동시에 다운로드 다운로드 투기) 업데이트 모듈을 갱신 할 필요.

그것은 세 가지의 업데이트 유형의 의미 : 증분 업데이트, 사용자 복제 (예를 들어, 사용자가 페이지의 댓글에 응답)와 페이지 간 업데이트를 (예를 들어, 읽기로 표시된 메시지에 대한 메시지 세부 사항 페이지에서, 집에있을 필요가 없습니다 읽지 않은 메시지)가 업데이트된다. 핵심 아이디어는 AJAX를 기반으로 업데이트 될 것입니다.

(1) 증분 업데이트 : 미리 정의 된 모든 업데이트 모듈이 될 것을, 캐시에서 페이지만큼 증분 업데이트

(2) 사용자 복제 : 녹화를 통해 사용자 작업 및 HistoryManager에 재생하는 모든 캐시 페이지 읽기에서 "replayable"작업으로 표시

(3) 크로스 페이지 업데이트 : API는 클라이언트에 신호가 invaild 데이터베이스로 확인 서버에서 캐시 만료 보냅니다. 정보를 업데이트하는 아약스를 통해 캐시 만료 정보를 획득 한 후 업데이트해야합니다.

처음부터 직접 그 내용을 업데이트하는 대신, 빈으로 설정되어 업데이트해야에 페이지 내용 변경을 피하기 위해 업데이트 아약스에 페이스 북의 통과 참조 / 플리커 트릭이다.

프런트 엔드 캐시 최적화에

추천