1. Why cache

  • Using the caching mechanism, previously obtained resources can be reused in corresponding scenarios.
  • Significantly improve site performance and responsiveness
  • Reduce network traffic and wait rendering times
  • Reduce server pressure

2. HTTP cache type

  • Strong cache
  • Negotiate the cache

3. Strong cache

For strong caching, the static resource response header returned by the server sets a mandatory cache time. During the cache time, if the browser refreshes and requests the same resource, the cached resource is directly used if the cache time has not expired. If the cache resource has expired, the negotiated cache policy is implemented.

  • The following are the HTTP header fields associated with strong caching
field use The instance priority The HTTP version
Expires Expiration date of strong cache Expires:Thu,06 Aug 2021 14:36:18 GMT low 1.0
Cache-Control Specifies instructions to implement the caching mechanism Cache-Control:max-age=60 high 1.1

3.1 Expires

  • Response headersExpiresThe field contains the expiration time of the strongly cached resource
  • A value of 0 indicates that the resource is expired or not strongly cached

3.2 Cache-Control

A generic header field that implements caching through instructions. Explain easy to confuse the two fields, other instructions reference instructions daji.

  • no-cache

The cache is forced to submit the request to the original server for validation (negotiated cache validation) before the cache copy is published.

  • no-store

The cache should not store anything about the client request or the server response, that is, no cache is used.

3.3 Differences between Expires and Cache-Control

  • The time difference between
    • ExpiresExpiration time indicates the absolute time when the cache expires in the future.
    • Cache-ControlIs relative to the current time. For example, the cache expires after 60 seconds
  • priority
    • ExpiresThe priority of theCache-Controlfield
    • At the same time there isCache-Control 和 ExpiresWhen, in order toCache-ControlInstructions shall prevail
  • The HTTP version
    • ExpiresHTTP/1.0 was introduced with better browser compatibility
    • Cache-ControlHTTP/1.1, browser compatibility is not good, soExpires 和 Cache-ControlCan exist at the same time, in not supportedCache-ControlThe browser of theExpiresShall prevail

4. Negotiate cache

  • Negotiation cache negotiates with the server whether to use the cache, and then determines whether to reload the resource or HTTP StatusCode 304
  • The following fields determine whether to use negotiated caching instead of strong caching:
field Negotiate the cache priority
Pragma Pragma:no-cache high
Cache-Control Cache-Control:no-cache / Cache-Control:max-age= low

4.1 Pragma

  • PragmaIs a generic header specified in HTTP1.0 ifCache-ControlIf it does not exist, it behaves withCache-Control: no-cacheConsistent. The cache server is forced to submit the request to the source server for negotiation validation before returning the cached version.
  • Pragma has only one value, no-cache, and it has a higher priority than cache-control.

4.2 Cache-Control

  • As described aboveCache-ControlIts instructions can be used for both strong caching and negotiation caching policies
  • Among themCache-Control: no-cache 和 Cache-Control: max-age=0Force requests to the server for authentication (negotiated resource authentication).

5. Negotiation strategy

Pragma fields or cache-Control :no-cache fields require negotiation policies. The two common pairs of negotiation Cache fields are as follows

  • ETag/If-None-Match
  • Last-Modified/If-Modfied-Since
field Corresponding field value describe priority
Last-Modified If-Modified-Since GMT time Time when the server resource was last modified low
If-Modified-Since Last-Modified GMT time Last-modified of the Last request header, which verifies whether the server resource was Last Modified, returns 304 or 200. low
Etag If-None-Match Content Hash/file information The generated hash of file information or file content for the server cache resource high
If-None-Match Etag Content Hash/file information The last request for ETag in the response header verifies that the server resource has not been modified. high

The advantages and disadvantages

  • If a server changes a piece of code and then changes it back.
    • The modification time of the resource file has changed
    • In fact, the file hasn’t changed
    • This invalidates the cache, causing unnecessary transfers
  • ETag can be compared based on the hash generated by the content. As long as the content of the resource file remains unchanged, client caching is applied to reduce unnecessary transfers.
  • So ETag is more accurate, efficient, and bandwidth efficient than last-Modified caching.

6. ETag

6.1 What is ETag?

Etag is an Entity tag that is used to identify a resource on the server that is passed to the client in the HTTP response header. Etag :W/” 50b1C1d4f775C61: DF3″

6.2 the ETag format

  • ETag:W/"xxxxxxxx"
  • ETag:"xxxxxxx"

Strong type validation

  • Each byte of the resource is the same.

The W/ prefix represents weak type validation

  • Each byte does not need to be the same, such as the time of the footer or the advertisement displayed. Building a tag (ETAG) architecture for weak validation types can be complicated because it involves ranking the importance of different elements on the page, but it can be quite helpful for cache performance optimization.

6.3 What are the requirements for ETag generation?

  1. When the file changes, the ETag value must change
  2. Easy to calculate as far as possible, not special CPU consumption.
  3. Use digest algorithm generation (MD5, SHA128, SHA256) should be considered carefully, these are CPU intensive operations.
  4. It’s not that it doesn’t work. There is no best algorithm, only the algorithm suitable for the scene.
  5. In distributed deployment, ETag values generated on multiple server nodes remain the same.

6.4 How ETag is Generated (Nginx)

Nginx source code ETag from last_modified and content_length concatenated

etag->value.len = ngx_sprintf(etag->value.data, "\"%xT-%xO\"",
                                  r->headers_out.last_modified_time,
                                  r->headers_out.content_length_n)
                      - etag->value.data;  
Copy the code
  • Translated into the following pseudocode
etag = header.last_modified + "-" + header.content_lenth
Copy the code
  • Summary: Nginx ETag is defined by the response headerLast-ModifiedandContent-LengthThe value is a hexadecimal number.

Lodash requested an inspection

const LAST_MODIFIED = new Date(parseInt('5fc4907d'.16) * 1000).toJSON()
const CONTENT_LENGTH = parseInt('f48'.16)

console.log(LAST_MODIFIED) / / the 2020-11-30 T06:26:05. 000 z
console.log(CONTENT_LENGTH) / / 3912
Copy the code
  • The output

  • Since thenginxIn theETagbyLast-ModifiedandContent-LengthThen it’s an enhanced versionLast-ModifiedWhere is the reinforcement?
  • Last-ModifiedIt only works on second level changes, andnginxIn theETagAdded the additional condition of file size, not only related to the modification time, but also related to the content to make it more precise.

6.5 How is last-Modified generated

In Linux

  • mtime:modified timeTimestamp of changes in file contents
  • ctime:change timeTimestamp for changes in file properties, includingmtime. And in thewindowsPhi, it means phicreation time
  • The HTTP service selectsLast-ModifiedWhen will generally choosemtime, indicating the time when the file contents are modified to be compatible with Windows and Linux.
  • The following is the nginx source code
    r->headers_out.status = NGX_HTTP_OK;     
    r->headers_out.content_length_n = of.size;     
    r->headers_out.last_modified_time = of.mtime;
Copy the code

6.6 If the ETag value in the HTTP response header changes, does it mean that the file content has changed?

  • Not necessarily
  • The file changes in a second and the file size stays the same
  • It’s extremely rare
  • Therefore, it is normal to tolerate a less than perfect but efficient algorithm.

Welcome to “Byte front-end ByteFE” resume delivery email “[email protected]”