Detailed explanation of HTTP caching mechanism

HTTP caching is a technology that improves web page performance by reducing server load, speeding up client response and saving network bandwidth. HTTP caching is mainly divided into two types: forced caching and negotiated caching.

Force caching

Forced caching allows the client to directly use locally cached resources within a specified period of time without sending a request to the server. Forced caching is controlled by the response header specified by the server, mainly through two fields: Cache-Control and Expires.

Cache-Control

Cache-Control is a general header that specifies the maximum validity period of the resource (max-age), whether the cache can be shared (public or private) and whether modification is allowed (no-cache or no -store).

Example:

<code>Cache-Control: max-age=3600</code>

The above means that the resource is valid for 3600 seconds and can be cached.

Expires

Expires is a deprecated field that specifies the absolute expiration time of the cache.

Example:

<code>Expires: Wed, 23 Aug 2024 03:36:26 GMT</code>

This means the resource will expire on August 23, 2024 at 3:36:26 AM.

If both Cache-Control and Expires exist, then Cache-Control takes precedence.

Negotiation Cache

Negotiating caching requires the client to check whether the server resource has been updated on every request. If not updated, the server returns a 304 status code and an empty response body, allowing the client to continue using the local cache. If updated, the server will return a 200 status code and the new resource, replacing the local cache. Negotiating cache involves server and client headers, mainly Last-Modified/If-Modified-Since and ETag/If-None-Match.

Last-Modified/If-Modified-Since

Last-Modified is a server-side field indicating the last modified time of the resource. Example:

<code>Last-Modified: Tue, 22 Aug 2024 02:36:26 GMT</code>

This means the resource was last modified on August 22, 2024 at 2:36:26 AM.

If-Modified-Since is a client-side field indicating the last time the resource was retrieved. Example:

<code>If-Modified-Since: Tue, 22 Aug 2024 02:36:26 GMT</code>

This means that the client retrieved the resource on August 22, 2024 at 2:36:26 AM.

If the two timestamps are equal or Last-Modified is earlier, the resource is not updated. If Last-Modified is later, the resource has been updated.

ETag/If-None-Match

ETag is a server-side field that represents a unique identifier for a resource. Example:

<code>ETag: '5d3a9f6d-1f86'</code>

This means that the identifier of the resource is "5d3a9f6d-1f86".

If-None-Match is a client-side field indicating the expected identifier of the resource. Example:

<code>If-None-Match: '5d3a9f6d-1f86'</code>

This means that the client expects a resource identifier of "5d3a9f6d-1f86".

If the two values ??match, the resource is not updated. If they are different, the resource has been updated.

HTTP Caching Best Practices

Combining negotiated caching and forced caching can effectively reduce unnecessary network requests while ensuring that users always have the latest content.

General method:

Force caching: For static resources (e.g. CSS, JS, images), set a longer cache duration. This allows the browser to retrieve resources directly from local storage without contacting the server.

Negotiation Cache: For resources that may change, use the negotiation cache. The browser will send a request to check if the resource has changed. If not, the server will return a 304 Not Modified response, allowing the browser to use local cache. If the resource has changed, the server will return 200 OK and the updated resource.

Example implementation:

Suppose we use Express.js as the backend framework:

<code>Cache-Control: max-age=3600</code>

Key Considerations

• Versioning: To maximize the effectiveness of forced caching, include version information in the resource URL, such as /static/js/main.2024082301.js. When a resource is updated, change the version number to ensure users always get the latest version.
• Cost of Negotiation Caching: Although negotiation caching reduces unnecessary data transfers, it still requires a network round trip. For resources that rarely change, forcing caching may be more efficient.

Leapcell: Your best choice for hosting backend projects

Leapcell is a new generation serverless platform for web hosting, asynchronous tasks and Redis:

Multi-language support

• Develop with Node.js, Python, Go, or Rust.

Deploy unlimited projects for free

• Pay only for what you use - no requests, no fees.

Unmatched cost-effectiveness

• Pay as you go, no inactivity fees.
• Example: $25 supports 6.94 million requests with an average response time of 60 milliseconds.

Simplified developer experience

• Intuitive UI, easy to set up.
• Fully automated CI/CD pipeline and GitOps integration.
• Real-time metrics and logging for actionable insights.

Easy scalability and high performance

• Auto-scaling to easily handle high concurrency.
• Zero operational overhead - just focus on building.

Learn more in the documentation!

Follow us on X: @LeapcellHQ

Read our blog

The above is the detailed content of HTTP Caching : Everything You Need to Know. For more information, please follow other related articles on the PHP Chinese website!