I. Introduction
Mainly divided into front-end cache HTTP cache and browser cache. Wherein HTTP cache is used in the HTTP request the transmit buffer, mainly provided on the server code; and the browser cache are mainly disposed on the front end by the front end js developed.
Cache performance optimization can be said that in a simple and efficient way to optimize the. A good caching strategy can shorten the distance page request resources, reduce latency, and since the cache file can be recycled can also reduce bandwidth and reduce network load.
For a data request, the request can be divided into the originating network, back-end processing, the browser in response to three steps. Browser cache can help us optimize performance in the first and third step. For example, instead of using the cache directly initiate a request, or initiate a request but the data stored in back-end and front-end consistent, then there is no need to pass data back and then come back, thus reducing the response data.
Second, the caching process analysis
The browser is in communication with the server response mode, that is: the browser sends an HTTP request - server responds to the request. So after the first browser that initiated the request to the server to get the result of the request, based on the response packet identifier cache HTTP header to decide whether to cache the result, and the result is then stored in the cache identifier requests the browser cache, simple FIG process is as follows:
From the above chart we can know:
The results each time the browser initiates a request, the request will first look in the browser cache and cache identifier
Each time the browser requests to get the results are returned and the result is stored in the browser cache identifier cache
Three forced Cache
Forced Cache cache lookup is the result of the request to the browser, and to decide whether to use the cache to cache results according to the rules of the result of the process, the forced caching There are three main, as follows:
The cache and cache the results ① symbol does not exist, the forced cache miss, the request is initiated (consistent with the first initiating request) directly to the server, as shown below:
② existence of the cache and cache the results of identification, but the results have failed to force a cache miss, then use negotiation cache, as shown below
③ The presence of the cache and cache identification result, and this result has not expired, the cache forced into effect, return the result directly, as in FIG.
So what forced buffer cache rules?
When a browser sends a request to the server, the server will cache rules into an HTTP response header in the HTTP packet and the request together with the results returned to the browser field, the control were forced cache Cache-Control and Expires, wherein Cache-Control priority over Expires.
Expires
Expires is HTTP / 1.0 Web cache control field, a value of the expiration time of the request server returns the cached results, i.e., initiate the request again, if the client is less than the value of the Expires time, the direct use of cached results.
To the HTTP / 1.1, Expire has been replaced by Cache-Control, because Expires principle of controlling the cache is to use the time client time and returned from the server to do comparison, so if the client and server time, for some reason (such as different time zones ; client and server have time to party inaccurate) error occurs, then the cache will force the direct failure, forcing the cache if there is nothing at all.
Cache-Control
In HTTP / 1.1 in, Cache-Control is the most important rule, mainly used to control the page cache, main values:
public: all content will be cached (client and proxy server can cache)
private: only clients all content can be cached, the default value of Cache-Control
no-cache: Client-side caching content, but if you need to use the cache buffer to verify decide after consultation
no-store: all of the content will not be cached, that is, without the use of forced cache, the cache is not using the negotiated
max-age = xxx (xxx is numeric): cache content will expire in xxx sec
Next, we see a direct example, as follows:
By the above example we can know:
①HTTP packet response time expires value is an absolute value
②HTTP response packet for the Cache-Control max-age = 600, is a relative value
Since the Cache-Control Expires priority higher than, then the cache directly according to the value of the Cache-Control, meaning that initiate the request again within 600 seconds, the results will be used as a cache, buffer force effect.
Note: In the case of determining whether or not the client time and time synchronization of the server, compared to the Cache-Control is a better option expires, so when exist, only Cache-Control entered into force.
After understanding the process of forced caching, we think the next step: the browser's cache stored in where and how to determine whether to force the cache into effect in the browser?
Here we blog request example, the status code represents the gray requests using forced caching request Size value represents a position corresponding to the buffer storage, respectively, and from memory cache from disk cache. So what is it from memory cache and from disk cache and on behalf of? When will use from disk cache, when it will use from memory cache it?
Representative from memory cache using a cache memory, from disk cache represents using a hard disk cache, the browser reads the cache sequence of memory -> disk -> Server requests.
So let's look at a detailed analysis with read caching problem, here in my blog still make an example for analysis:
First visit to page
Close blog tabs, reopen the page
refresh page
Memory cache (from memory cache): cache memory has two characteristics, namely, speed and time constraints.
Disk cache (from disk cache): directly to the disk cache buffer is written to the disk file, the read buffer needs to be I / O operations on the file cache stored in the hard disk, and then re-parse the contents of the cache, read complicated speed slower than the memory cache.
In the browser, the browser will be deposited directly into js and after pictures and other file parsing execution memory cache, you can simply refresh the page when reading directly from memory cache (from memory cache); and css file will be saved the hard disk file, so every time to render pages need to read cache (from disk cache) from the hard disk.
Four consultations Cache
After the consultation is to force a cache miss the cache, the browser sends a request to carry identity cache server, the cache server identifies decide whether to use the cache process in accordance with, mainly in the following two situations:
① negotiation cache entry into force, return to 304, as follows
② negotiation cache invalidation, and request a 200 Results below
Similarly, identification negotiation cache is also in the response message of HTTP headers and the request together with the results returned to the browser, control negotiation cache fields respectively: Last-Modified / If-Modified-Since and Etag / If-None-Match wherein Etag / If-None-Match higher priority than the Last-Modified / If-Modified-Since.
Last-Modified / If-Modified-Since
Last-Modified when the server response to the request, the server returns the resource file was last modified, as follows.
If-Modified-Since it is the client that initiated the request again, carrying the Last-Modified value returned by the last request, by the value of this field tells the server was last modified time of the last request the return of the resource. The server receiving the request, the first discovery request containing the If-Modified-Since field, will be based on field values If-Modified-Since in contrast to the resources to do last modified time of the server, if the server resource was last modified time is greater than field value of If-Modified-Since, the return to the resource, status code 200; otherwise, it returns 304, no update on behalf of the resource, the cache can continue to use the file, as follows.
Etag / If-None-Match
Etag is a response to the request server returns a unique identifier of the current resource file (generated by the server), as follows.
If-None-Match is a client initiated the request again, it carries a unique identifier Etag value returned by the last request, by the value of this field tells the server that uniquely identifies the request to return the last value of the resource. When the server receives the request, the request is found to contain header If-None-Match, will be done in comparison with the value of the server Etag resource based on field values If-None-Match, the same is returned 304, no update on behalf of the resource , continue to use the cache file; inconsistent with the return to the resource file, the status code is 200, as follows.
Note: Etag / If-None-Match higher priority than the Last-Modified / If-Modified-Since, at the same time there is only Etag / If-None-Match effect. For the negotiation cache, use Ctrl + F5 to force a refresh invalid cache can make. But for the strong cache, while not expired, you must update the resource path to initiate a new request (to change the path of the equivalent of another resource, and this is common to the front-end engineering skills in).
to sum up
Forced to negotiate cache cache priority, if forced cache (Expires and Cache-Control) entry into force of the direct use of the cache, if the cache entry into force of the consultations (Last-Modified / If-Modified-Since and Etag / If-None-Match) consultation cache server to decide whether to use the cache, the cache if the negotiation fails, the failure of the request on behalf of the cache, retrieve the results of the request, and then stored in the browser cache; 304 is returned into effect, continue to use the cache, the main process is as follows:
Five browser cache
5.1 small local storage capacity
Cookie primarily for storing user information, Cookie content may be automatically transmitted to the server when requested.
LocalStorage data will be kept within the browser until the user cleared the browser cache data.
Other property SessionStorage with LocalStorage, but the life cycle of its life cycle with the tab when the tab is closed, SessionStorage also be cleared.
5.2 large local storage capacity
WebSql and IndexDB mainly used on the front page a large-capacity storage requirements, such as online editor web browser or email.
And from 5.3 Cache
And from the cache, also known as BFCache, browser forward and back buttons on a strategy to improve the speed of rendering pages of history. The strategy Specific performance is when users go to a new page, save browser DOM status of the current page to the bfcache in; when the user clicks the back button when the page is loaded directly from bfcache in saving time network requests.
Author: Tmasz
link: https: //www.jianshu.com/p/256d0873c398
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.