Mastering HTTP Caching: How Browsers Use Headers to Optimize Web Performance
This article explains the fundamentals of HTTP caching, detailing the relevant request and response header fields, their interactions, practical simulation using Fiddler, browser-specific behaviors, and best‑practice strategies for configuring Expires, Cache‑Control, ETag, and Last‑Modified to improve web performance.
HTTP Header Fields Related to Caching
RFC2616 defines 47 header fields, of which several are directly related to caching. They are grouped into general, request, response, and entity header fields.
1. General Header Fields
2. Request Header Fields
3. Response Header Fields
4. Entity Header Fields
The article then proceeds to illustrate these fields through a simple simulation.
Scenario Simulation
A minimal HTML page containing a local CSS file and an image is used to observe caching behavior.
<!DOCTYPE html>
<html>
<head>
<title>缓存测试</title>
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<h1>哥只是一个标题</h1>
<p><img src="img/dog.jpg" /></p>
</body>
</html>Modifying Header Fields
Browsers may automatically add fields such as Cache-Control: max-age=0 when pressing F5, overriding other directives like Pragma . To manually edit request or response headers, the article demonstrates using Fiddler with the bpu command to intercept and modify traffic.
Browser Forced Policies
Most browsers add Cache-Control: max-age=0 on a refresh button click, while pressing Enter in the address bar does not. Some browsers exhibit additional quirks, discussed later in the article.
Cache Mechanisms in HTTP/1.0
Pragma (value no-cache ) tells the client not to read from cache. It is a general header and is only recognized by IE via a meta tag.
<meta http-equiv="Pragma" content="no-cache">Expires specifies an absolute GMT expiration time for a resource.
<meta http-equiv="expires" content="Mon, 18 Apr 2016 14:30:00 GMT">Cache‑Control (HTTP/1.1)
When Cache‑Control is present, it overrides Pragma and Expires . The header format is Cache-Control: cache-directive, with directives such as max-age=3600, must-revalidate or no-cache, no-store.
Cache-Control: max-age=3600, must-revalidateCache Validation Fields
Last-Modified provides the resource's last modification time. Clients send If-Modified-Since to request a 304 response when unchanged.
If-Modified-Since: Thu, 31 Mar 2016 07:07:52 GMTIf-Unmodified-Since triggers a 412 response if the resource has changed.
If-Unmodified-Since: Thu, 31 Mar 2016 07:07:52 GMTETag is a unique identifier (e.g., an MD5 hash). Clients send If-None-Match to receive a 304 when the ETag matches, or the full entity otherwise. If-None-Match: "56fcccc8-1699" If both Last-Modified and ETag are present, both must validate for a 304 response.
Cache Practice
In real projects, a combination of Expires , Cache‑Control , ETag , and Last-Modified is used. Static resources often receive long cache times, while HTML pages may use Cache-Control: private or short max-age values.
Versioning static assets (e.g., appending an MD5 hash or timestamp to the filename or query string) ensures clients fetch updated files when they change.
Other Related Header Fields
Vary tells caches to store separate versions based on specified request headers, such as Vary: User-Agent, Accept-Encoding.
Date and Age help determine whether a response was served from a proxy cache. The rule staticResourceAge + staticResourceDate = originServerDate can be used, though it may be unreliable if server clocks differ.
Overall, understanding and correctly configuring these headers enables efficient use of HTTP caching, reduces bandwidth, and improves user experience.
Original article: http://www.cnblogs.com/vajoy/p/5341664.html Author: VaJoy Larn
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.