알 수 없는 브라우저 http 캐시

브라우저에서 로컬에 이 자원이 있는 캐시를 발견했지만 최신 캐시인지 확실하지 않아서 서버가 브라우저의 캐시 버전을 사용할 수 있다고 생각하면 304로 되돌아갈 것입니다.

강력한 캐시와 협상 캐시.

1. 브라우저는 어떤 자원을 요청하고 헤더를 통해 강한 캐시 여부를 판단합니다. 강한 캐시라면 로컬에서 캐시 파일을 직접 가져와 브라우저에 요청하지 않습니다.
2. 강력한 캐시가 아니라면 서버에 요청을 보내고 서버는 일부request 헤더를 통해 협상 캐시인지 확인합니다. 만약 그렇다면 서버는 요청을 되돌려주지만 자원을 되돌려주지 않고 클라이언트가 로컬 캐시에서 자원을 가져오도록 합니다
3. 캐시와 협상 캐시, 자원은 모두 로컬입니다. 다만 캐시는 요청을 서버에 보내지 않습니다. 협상 캐시는 요청을 서버에 보냅니다.
4. 협상 캐시가 아닌 브라우저는 자원을 클라이언트에게 보냅니다.
강력한 캐시: 서버가 요청에 처음 응답할 때 브라우저에 로컬이 존재한다고 알리고 시간을 설정하며 시간 내에 이 자원을 가져오면 로컬에서 가져옵니다.Expires Cache-Control 두 응답 첫 번째 필드는 만료 시간과 최대 수명 주기를 알려줍니다.캐시에서 자원을 찾을 것을 다시 요청합니다. 요청 시간이 Expires보다 빠르면 로컬 자원을 사용할 수 있습니다.http1.1 Cache-Control 캐시 리소스의 최대 생명주기, 초 단위.같이 Cache-Control 위주로 사용합니다.협상 캐시: 파일의 마지막 수정 시간, 서버는 자원의 업데이트 여부를 판단하고, 업데이트되지 않으면 304는 notmodified를 표시하고, 브라우저는 캐시에서 불러옵니다.LastModified: 리소스의 마지막 업데이트 시간을 서버와 함께 반환합니다.if-modified-Since가 첫 번째 필드를 요청하면 두 시간을 비교하여 자원의 수정 여부를 판단합니다.수정이 없으면 캐시를 협상합니다.

절차 설명:

1. 브라우저가 처음으로 리소스, 서버 응답, 리소스 반환, 응답 헤더에 Last-Modified를 요청합니다.
2. 브라우저는 리소스를 다시 요청하고 요청 헤더에 ifmodifiedsince를 추가합니다. 이 값은 지난번 Last-Modified의 값입니다.
3. 서버는 요청을 받아들여 ifmodifiedsince 값과 자원의 마지막 수정 값을 비교하고 일치하면 304, 협상 캐시를 되돌려줍니다.

Etag는 주기적으로 자원을 다시 쓰지만 자원은 변화가 없고 주석을 넣는 등 중요한 정보가 없다.Etag로 두 자원이 일치하는지 구분하고response 반환과 요청 헤더의if-none-match와 비교하여 자원이 두 번의 요청에서 수정되었는지 판단하고 수정하지 않으면 캐시를 협상합니다..

그리고 세 가지 캐시 방식: 응용 프로그램 캐시, 쿠키,localstorage,sessionstorage

그렇다면 앞부분은 어떻게 실현됩니까?

ifModified 이해

ifModified (Boolean) : ( : false)  。  HTTP   Last-Modified  。

ifModified의 정의에서 알 수 있듯이 ifModified가true로 설정되면 요청 헤더에 If-Modified-Since를 추가합니다. if-Modified-Since는 표준 http 요청 헤더 탭입니다. http 요청을 보낼 때 브라우저 캐시 페이지의 마지막 수정 시간을 서버에 보내면 서버는 이 시간을 서버의 실제 파일의 마지막 수정 시간과 비교합니다.
만약 시간이 일치한다면 http 상태 코드 304를 되돌려줍니다. (파일 내용을 되돌려주지 않습니다.)
만약 시간이 일치하지 않으면 http 상태 코드 200과 새로운 파일 내용을 되돌려줍니다. 클라이언트가 받은 후에 낡은 파일을 버리고 새 파일을 캐시하여 브라우저에 표시합니다.

Last-Modified 이해

Last-Modified: 이 파일의 마지막 수정 날짜를 표시합니다. 파일 속성과 서버는 상관없습니다.
정적 자원 파일에 유용한 속성입니다. 정적 자원 파일을 요청할 때 요청 헤더는 If-Modified-Since:xx(시간) 속성을 가지고 있습니다. 이 속성은 지난 요청 때 얻은 Last-Modified 시간입니다. 만약 이번 요청 헤더 시간과 응답 헤더 시간이 일치한다면 304 상태 코드를 되돌려 브라우저가 현재 가지고 있는 페이지가 최신 데이터가 필요하지 않다는 것을 알려 줍니다.

실현

function getAjax(url, sendData, state = true) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            data: sendData,
            type: 'get',
            dataType: 'json',
            cache: !state, // 
            ifModified: state,// 
            success(data, des, status) {
                if (status.status === 200) {
                    if (data.code === 200) {
                        return resolve(data.data);
                    } else {
                        return reject({code: data.code, message: data.message});
                    }
                }
                if (status.status === 304) {
                    getAjax(url, sendData, false)
                    .then(data => {
                        resolve(data);
                    })
                    .catch(data => {
                        reject(data);
                    });
                }
            }, error() {
                return reject({code: 503, message: ' ， ！'});
            }
        });
    });
}

분석

getajax에 3개의 매개 변수, url 인터페이스 주소,sendData가 전송한 데이터,state 상태 값[ifModified의 상태를 대표합니다]

우선 백엔드에 데이터가 업데이트되었는지 물어봅니다. ifModified의 상태는true이고 브라우저의 캐시 데이터를 사용하지 않습니다.cache는false를 설정합니다

http 상태 코드가 200으로 돌아왔을 때 데이터가 업데이트되었음을 설명하고 서버에서 전송된 새로운 데이터를 직접 사용합니다

http 상태 코드가 304로 돌아왔을 때 데이터가 바뀌지 않았고 서버가 새로운 데이터를 되돌려주지 않으면 브라우저 캐시에 데이터를 요청합니다. 이때cache는true를 설정합니다. ifModified의 상태는false이고 서버 데이터가 업데이트되었는지 물어볼 필요가 없습니다

요약: 캐시를 사용하는 목적은 계산, IO, 네트워크 등 시간을 줄이고 신속하게 되돌아갈 수 있도록 하는 것이다. 특히 데이터가 비교적 많을 때 많은 서버 대역폭과 압력을 절약할 수 있다.