How to use Cache for front-end performance optimization?

What is a cache?

Caching is a technique that saves a copy of a resource and uses that copy directly on the next request. It can reduce wait time and network traffic and significantly improve website performance.

1. Common cache

Private caches: can only be used by individual users, such as browser caches;
Shared cache: can be used by multiple users, such as proxy server cache;

2. What resources are cached?

Resources requested by HTTP GET are cached by default, such as HTML documents, images, and files.
The server response, containing the cache-control header, determines whether to Cache the resource based on the specific instruction.

3. Check the cache status of resources.

Open a website with Chrome;
Open developer tools (Windows Control+Shift+J, Mac Command+Option+J);
Both disk cache and memory cache are caches.
Do not check Disable cache, which means that caching is disabled.

4. Check the server’s cache configuration.

The following figure shows the resource returned by the server. Click one of the rows to display the details of the resource request and response. In the figure, cache-Control is the server’s Cache configuration for this resource.

Second, cache update

1. Trigger the cached validation request

The resource is updated, and the browser must retrieve the resource to display the latest version of the site. Each of the following situations triggers an authentication request: if the resource is updated, the server returns the latest resource to the client, otherwise the client continues to display the page using the cache.

Click the refresh button of the browser, need to verify;
The current time is greater than the response header Expires time and needs to be verified.
The local saving duration of the Cache exceeds the max-age and s-maxage duration in cache-control, and this parameter needs to be verified.
Cache-control is set to no-cache.

2. The process of cache validation?

If the local duration of the Cache exceeds the max-age specified in cache-Control, a Cache verification is required. In the figure, the verification result is 304(Not Modified), indicating that the Cache has Not been Modified and can continue to be used.

Cache headers in validation requests

The specific information of the cache (resource ID, modification time, etc.) is in the request header, and the server can compare this information to know whether the cache needs to be updated. Common request header combinations for cache validation:

ETag + the If – Match; ETag + the If – None – Match;

The ETag is a unique identification of the resource and can quickly determine whether the latest resource needs to be returned to the requester.
Last-modified + the If – Modified – Since; Last-modified + If Unmodified – Since;

These two methods determine whether the cache needs to be updated based on time, and are usually used without ETag.

Three, the related`HTTP header`instructions

1, the cache-control

Cache-control is the HTTP request header and response header used for caching. A single request can contain multiple instructions separated by commas. Instructions are case insensitive but lower case is recommended. For details, see here!

2, than

Vary is one of the response headers of the HTTP protocol that the proxy server uses to determine whether a shared cache exists to respond to a customer, and if it does not, sends a new request to the source server to respond to the user. For details, see here!

3. Other related heads

ETag: The unique identifier of the resource used to determine whether the cached resource is up to date.
If-match, if-none-match: used to determine whether the resource exists or does not exist? ;
Last-modified: indicates the Last modification time of a resource.
If-modified-since, if-unmodified-since: has or has not been Modified Since a given time?
For a full description of these properties, see here!

How does Nginx use caching?

As a proxy server, Nginx enables caching to reduce the pressure on the source server and improve the performance of the entire website. For details, see here!

5. Reference documents