問題描述
瀏覽器如何知道網頁發生了變化？ (How does the browser know a web page has changed?)
This is a dangerously easy thing I feel I should know more about ‑ but I don't, and can't find much around.
The question is: How exactly does a browser know a web page has changed?
Intuitively I would say that F5 refreshes the cache for a given page, and that cache is used for history navigation only and has an expiration date ‑ which leads me to think the browser never knows if a web page has changed, and it just reloads the page if the cache is gone ‑‑‑ but I am sure this is not always the case.
Any pointers appreciated!
‑‑‑‑‑
參考解法
方法 1:
Don't guess; read the docs. Here's a friendly, but authoritative introduction to the subject.
方法 2:
Browsers will usually get this information through HTTP headers sent with the page.
For example, the Last‑Modified header tells the browser how old the page is. A browser can send a simple HEAD request to the page to get the last‑modified value. If it's newer than what the browser has in cache, then the browser can reload it.
There are a bunch of other headers related to caching as well (like Cache‑Control). Check out: http://www.w3.org/Protocols/rfc2616/rfc2616‑sec14.html
方法 3:
Web browsers send HTTP requests, and receive HTTP responses. They then displays the contents of the HTTP responses. Typically the HTTP responses will contain HTML. And many HTML elements may need new requests to receive the various parts of the page. For example each image is typically another HTTP request.
There are HTTP headers that indicate if a page is new or not. For example the last modified date. Web browsers typically use a conditional GET (conditional header field) or a HEAD request to detect the changes. A HEAD request receives only the headers and not the actual resource that is requested.
A conditional GET HTTP request will return a status of 304 Not Modified if there are no changes.
The page can then later change based on:
- User input
- After user input, changes can happen based on javascript code running without a postback
- After user input, a new request to the server and get a whole new (possibly the same) page.
- Javascript code can run once a page is already loaded and change things at any time. For example you may have a timer that changes something on the page.
- Some pages also contain HTML tags that will scroll or blink or have other behavior.
方法 4:
You're getting along the right track, and as Jonathan mentioned, nothing is better than reading the docs. However, if you only want a bit more information:
There are HTTP response headers that let the server set the cacheability of a page, which falls into your expiration date system. However, one other important construct is the HTTP HEAD request, which essentially retrieves the MIME Type and Content‑Length (if available) for a given page. Browsers can use the HEAD request to validate what is in their caches...
There is definitely more info on the subject though, so I would suggest reading the docs...
(by JohnIdol、Jonathan Feinberg、Seth、Brian R. Bondy、LorenVS)